Получение значений модели из динамически открытой области контроллера в AngularJS

Я разрабатываю веб-приложение с использованием Angular JS. Я новичок в AngularJS. В моем приложении мне нужно динамически добавлять и удалять элементы. Я использую директиву для этого. Добавление и удаление элементов работает нормально. Но у меня проблема с получением каждой модели добавленных входных данных.

Мой сценарий ниже.

это мое приложение

     <!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>

Я прокомментировал то, что хочу сделать в приведенном выше коде.

это строка.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>

Как я могу получить каждое значение всех динамически добавленных элементов управления вводом в функции submitForm?


angularjs angularjs-directive angular-directive angularjs-controller angularjs-scope
person Wai Yan Hein    schedule 27.09.2016    source источник
comment
можете ли вы создать plunkr с вашими кодами   -  person balajivaishnav    schedule 27.09.2016
comment
Вы не можете переместить функцию submitForm() в свою директиву? Тогда у вас не будет значений в $scope   -  person Ranjith V    schedule 27.09.2016
comment
не может привести к тому, что мне также нужно получить значения некоторых элементов управления из родительского контроллера.   -  person Wai Yan Hein    schedule 27.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вот ответ, основанный на требовании,

Вы изолировали область с помощью scope: {}, поэтому вы не можете получить доступ к этим значениям модели.

Попробуйте связать область,

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

Контроллер и директива,

    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>

Вот ваш 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>
person Sravan    schedule 27.09.2016
comment
пожалуйста, проверьте, как отправлять объекты области здесь, $compile('<dynamic-Row contact_type=$scope.contact_type contact_value=$scope.contact_value></dynamic-Row>')($scope); я никогда не использовал эту компиляцию $, скорректируйте код для отправки данных области действия в директивы - person Sravan; 27.09.2016
comment
Наконец-то я смог передать $scope в директиву. Но как мне привязаться к объекту contact _type? contact_type будет передаваться каждой строке (директиве). Затем я подтолкну значение к переданному контактному_типу. Если строка будет удалена, значение в коллекции contact_type не будет удалено. Пожалуйста, как я могу использовать его правильно? Пожалуйста, объясните мне. - person Wai Yan Hein; 27.09.2016
comment
$compile('<dynamic-Row contact-type="contactType"></dynamic-Row>')($scope); в этой строке вы contactType должны быть переменной области видимости. - person Sravan; 27.09.2016
comment
Итак, пожалуйста, могу ли я получить это в коде? Я действительно не понимаю, как это работает. Если я получу код, я увижу и пойму, как он работает, и смогу научиться. - person Wai Yan Hein; 27.09.2016
comment
Давайте продолжим обсуждение в чате. - person Sravan; 27.09.2016