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
– Ranjith V, Commented Sep 27, 2016 at 13:26
cannot cause I also need to retrieve values of some controls from Parent controller as well. — Wai Yan Hein
– Wai Yan Hein, Commented Sep 27, 2016 at 13:32

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

0

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>

edited Sep 27, 2016 at 15:30

answered Sep 27, 2016 at 13:33

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sravan Over a year ago

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

Wai Yan Hein Over a year ago

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.

Sravan Over a year ago

$compile('<dynamic-Row contact-type="contactType"></dynamic-Row>')($scope); in this line you "contactType" should be a scope variable.

Wai Yan Hein Over a year ago

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.

Sravan Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related