Retrieving model values from dynamically opened controller's scope in AngularJS

Question

I am developing an Web Application using Angular JS. I am a beginner to AngularJS. In my app, I need to dynamically add and remove elements. I use directive for it. Adding and removing elements is working fine. But I am having a problem with retrieving each model value of added inputs.

My scenario is below.

This is my app

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angularjs popup</title> <link href="http://localhost:8888/angular/bootstrap.css" rel="stylesheet"> <script src="http://localhost:8888/angular/angular-js.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller='myCtrl'> <div> <button class="btn btn-success" ng-click="addRow()">Add row</button> <hr /> <div id="rowsContainer"> </div> <button class="btn btn-primary" ng-click="submitForm()">Submit</button> </div> </div> </body> <script type="text/javascript"> var app = angular.module('myApp',[]); app.controller('myCtrl',function($rootScope,$scope,$compile){ $rootScope.getContacts = function() { var list = [{contactId: 1,contactType: 'Mobile'} , {contactId: 2,contactType: 'Office'} , {contactId: 3,contactType: 'Home'}]; return list; } $scope.contactType = []; $scope.contactValue = []; $scope.submitForm = function(){ alert($scope.contactType) //I want to retrieve ContactValue and ContactType here. All values by looping throgh }; $scope.addRow = function() { var divElement = angular.element(document.querySelector('#rowsContainer')); var appendHtml = $compile('<dynamic-Row contact-type="contactType"></dynamic-Row>')($scope); divElement.append(appendHtml); } }); app.directive('dynamicRow', function() { return { restrict: "E", scope: { contactType: "=contactType", contactValue : "=contactValue" }, templateUrl:'http://localhost:8888/angular/dynamic/row.html', controller: function($rootScope, $scope, $element) { $scope.contacts = $rootScope.getContacts(); $s cope.contactType.push($scope.contact_type) $scope.contactValue.push($scope.contact_value) $scope.deleteRow = function(e){ $element.remove(); $scope.$destroy(); } } } }); </script> </html>

I commented what I want to do in the above code.

this is the row.html

 <div class="row"> <div class="col-md-5"> <select name="ContactType" class="form-control" ng-model="contact_type" > <option ng-repeat="contact in contacts" value="{{contact.contactId}}"> {{contact.contactType}} </option> </select> </div> <div class="col-md-5"> <input ng-model="contact_value" class="form-control"> </div> <div class="col-md-2"> <button ng-click="deleteRow($event)" class="btn btn-danger">X</button> </div> </div>

How can I get the each value of all dynamically added input controls in submitForm function?

Can't you move the submitForm() function to your directive? You will have noth the values in $scope then — Ranjith V, CommentedSep 27, 2016 at 13:26
cannot cause I also need to retrieve values of some controls from Parent controller as well. — Wai Yan Hein, CommentedSep 27, 2016 at 13:32

Sravan · Accepted Answer · 2016-09-27 15:30:48Z

Here is the answer based on the requirement,

You Isolated the scope using scope: {}, so you cannot access those model values.

Try to bind the scope,

scope: { contact_type: "=contact_type" contact_value: "=contact_value" }

Controller and Directive,

 var app = angular.module('myApp',[]); app.controller('myCtrl',function($rootScope,$scope,$compile){ $rootScope.getContacts = function() { var list = [{contactId: 1,contactType: 'Mobile'} , {contactId: 2,contactType: 'Office'} , {contactId: 3,contactType: 'Home'}]; return list; } $scope.contactType = []; $scope.contactValue = []; $scope.submitForm = function(){ alert($scope.contactType) //I want to retrieve ContactValue and ContactType here. All values by looping throgh }; $scope.addRow = function() { var divElement = angular.element(document.querySelector('#rowsContainer')); var appendHtml = $compile('<dynamic-Row contact-type="contactType" contact-value="contactValue"></dynamic-Row>')($scope); divElement.append(appendHtml); } }); app.directive('dynamicRow', function() { return { restrict: "E", scope: { contactType: "=contactType", contactValue : "=contactValue" }, templateUrl:'row.html', controller: function($rootScope, $scope, $element) { console.log($scope.contactType) $scope.contacts = $rootScope.getContacts(); // $s $scope.update = function() { $scope.contactType.push($scope.contact_selected) } $scope.contactValue.push($scope.contact_value_selected) $scope.deleteRow = function(e){ $element.remove(); $scope.$destroy(); } } } });

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Angularjs popup</title> <!-- <link href="http://localhost:8888/angular/bootstrap.css" rel="stylesheet"> --> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller='myCtrl'> <div> <button class="btn btn-success" ng-click="addRow()">Add row</button> <hr /> <div id="rowsContainer"> </div> <button class="btn btn-primary" ng-click="submitForm()">Submit</button> </div> </div> </body> </html>

Here is your row.html,

<div class="row"> <div class="col-md-5"> <select name="ContactType" class="form-control" ng-model="contact_selected" ng-change="update()"> <option ng-repeat="contact in contacts" value="{{contact.contactId}}"> {{contact.contactType}} </option> </select> </div> <div class="col-md-5"> <input ng-model="contact_value_selected" class="form-control"> </div> <div class="col-md-2"> <button ng-click="deleteRow($event)" class="btn btn-danger">X</button> </div> </div>

pls check how to send scope objects here, $compile('<dynamic-Row contact_type=$scope.contact_type contact_value=$scope.contact_value></dynamic-Row>')($scope); I never used this $compile, adjust the code to send scope data to directives — Sravan, CommentedSep 27, 2016 at 13:39
I could finally pass $scope to directive. But how can I bind with the contact _type object? contact_type will be passed to every row(directive). Then I will push value to contact_type passed. If the row is removed, the value in the contact_type collection will not be removed. Please how can I use it correctly? Please explain me. — Wai Yan Hein, CommentedSep 27, 2016 at 14:06
$compile('<dynamic-Row contact-type="contactType"></dynamic-Row>')($scope); in this line you "contactType" should be a scope variable. — Sravan, CommentedSep 27, 2016 at 14:20
So please can I have it in code? I really do not understand how it work. If I get code, I can see and I will understand how it works and I can learn. — Wai Yan Hein, CommentedSep 27, 2016 at 14:24

Collectives™ on Stack Overflow

Retrieving model values from dynamically opened controller's scope in AngularJS

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related