Question

我正在使用Angular JS开发Web应用程序。我是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>

我在上面的代码中评论了我想要做的事情。

这是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>

如何在submitForm函数中获取所有动态添加的输入控件的每个值？

Answer 1

以下是基于要求的答案，

您使用scope: {}隔离了范围，因此您无法访问这些模型值。

尝试绑定范围，

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

控制器和指令，

＆＃13;

    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();
        }
        }
    }
});

＆＃13;

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

＆＃13;

这是 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>

从AngularJS中动态打开的控制器范围中检索模型值

1 个答案: