獲取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中的對象數組

回答

相關問題