获取AngularJS中的对象数组

我正在使用指令在点击按钮时动态添加HTML div。获取AngularJS中的对象数组

如何将模型绑定到控制器作用域对象？
如何填充动态添加的div中输入数据的范围对象？
如何获取对象列表，同时点击保存按钮。

请找到我试图动态添加html div的代码，但不知道如何将输入的数据绑定到作用域对象。

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
     <script type="text/javascript"> 

     function FlatMember() { 
      this.firstName = ''; 
      this.lastName = ''; 
      this.emailId = ''; 
      this.panNo = ''; 
      this.phoneNo = ''; 
      this.profileImage = '' 
     } 

     angular.module('myApp', []); 

     angular.module('myApp').controller('FlatMemberController', function ($scope) { 
      $scope.flatMembers = []; 

      $scope.addFlatMember = function() { 
       $scope.flatMembers.push(new FlatMember()); 
      }; 

      $scope.SaveFlatMember = function(){ 
       console.log($scope.flatMembers); 
      } 
     }); 

     angular.module('myApp').directive('memberInformation', function(){ 
      return { 
       restrict: 'A', 
       template: '<div style="margin-top: 50px;">\ 
          <div>\ 
           <p>\ 
            <label>First Name </label>\ 
            <input type="text" id="firstName" /> \ 
            <label>Last Name </label> <input type="text" id="lastName" />\ 
           </p>\ 
           <p>\ 
            <label>Email </label> <input type="email" id="emailId"/>\ 
           </p>\ 
           <p>\ 
            <label>PAN Number </label> <input type="text" id="panNo" data-ng-minlength="10"/>\ 
           </p>\ 
           <p>\ 
            <label>Mobile </label> <input type="text" data-ng-minlength="10" id="phoneNo" />\ 
           </p>\ 
          </div> </div>', 
       replace: true, 
       transclude: false, 
       scope: { 
        memberInfo: '=memberInformation' 
       } 
      }; 
     }); 
     </script> 
    </head> 
    <body ng-app="myApp"> 
     <div ng-controller="FlatMemberController"> 
      <button ng-click="addFlatMember()">Add new Member</button> 
      <div ng-repeat="flatMember in flatMembers"member-information="flatMember"></div> 
      <button ng-click="SaveFlatMember()">Save Member</button> 
     </div> 
    </body> 
</html>

来源

2017-03-25 Anil Kumar

您的模板是缺少ng-model绑定：

angular.module('myApp').directive('memberInformation', function(){ 
      return { 
       restrict: 'A', 
       template: '<div style="margin-top: 50px;">\ 
          <div>\ 
           <p>\ 
            <label>First Name </label>\ 
            <input type="text" id="firstName" name="firstName" ng-model="memberInfo.firstName" /> \ 
            <label>Last Name </label> <input type="text" id="lastName" name="lastName" ng-model="memberInfo.lastName" />\ 
           </p>\ 
           <p>\ 
            <label>Email </label> <input type="email" id="emailId" name="emailId" ng-model="memberInfo.emailId" />\ 
           </p>\ 
           <p>\ 
            <label>PAN Number </label> <input type="text" id="panNo" data-ng-minlength="10" name="panNo" ng-model="memberInfo.panNo" />\ 
           </p>\ 
           <p>\ 
            <label>Mobile </label> <input type="text" data-ng-minlength="10" id="phoneNo" name="phoneNo" ng-model="memberInfo.phoneNo" />\ 
           </p>\ 
          </div> </div>', 
       replace: true, 
       transclude: false, 
       scope: { 
        memberInfo: '=memberInformation' 
       } 
      }; 
     });

来源

2017-03-25 07:25:04 fedeisas

感谢@fedeisas。如果我点击保存按钮，如何获取对象列表？ –

打开你的控制台。您已经在执行'$ scope.flatMembers'对象的'console.log'。我不确定我了解你的问题。 – fedeisas

谢谢@fedeisas。它完成:) –

获取AngularJS中的对象数组

回答

相关问题