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에서 객체 배열 가져 오기

답변

관련 문제