AngularJS와 - 동적 크기 배열 NG 모델

Question

이 내 시나리오,

보기 :

<div data-ng-controller="MyModuleController"> 
    <div ng-repeat="a in range() track by $index" > 
     <ty-project idx="$index+1" ng-model="projects[$index]" ></ty-project> 
    </div> 
</div> 

컨트롤러 :

$scope.projects= []; 

$scope.range = function() { 
    // return some random number - it does not really matter for the purpose 
}; 

타이 프로젝트가 단지 지시

입니다

angular.module('mymodule').directive('tyProject', [ 
    function() { 
     return { 
      templateUrl: 'modules/mymodule/directives/typrojectTemplate.html', 
      restrict: 'E', 
      scope: { 
        idx: '=' 
      }, 
      link: function postLink(scope, element, attrs) { 
      } 
     }; 
    } 
]); 

typrojectTemplate은 간단합니다. 다음과 같이 두 입력이있는 템플릿 :

<div> 
     <label>Project_{{idx}} name</label> 
     <input type="text" name="project.name" ng-model="project.name"/> 
    </div> 
    <div > 
    <label >Project_{{idx}} total </label> 
    <input type="number" name="project.total" ng-model="project.total" /> 
</div> 

이 2 있을 것 2 개 프로젝트 각 객체 프로젝트 이름과 전체 속성을 가지고 있으므로 경우 범위 방법의 대가로 내 컨트롤러

angular.module('mymodule').controller('MyModuleController', ['$scope', 
    function($scope) { 

     $scope.projects: [] ; 

     $scope.save = function() { 

      console.log(projects); 
     }; 

     $scope.range = function() { 
      var n= 2;// todo: return random number.. 
      return new Array(n); 
     }; 
    } 
]); 

입니다.

어떻게 프로젝트를 컨트롤러에 바인딩 할 수 있습니까?

감사합니다.

Answer 1

건 컨트롤러에서 지시어로 스코프를 전달해야합니다. 지시문은이 범위를 템플릿에 전달합니다.

당신은 당신의 지시에이 작업을 수행 할 수 있습니다 :

scope:{ 
     project: '=ngModel'//will pass it to the Template. 
     idx: '=' // 
} 

u는 뷰 컨트롤러를 할당 여부를 나는 잘 모릅니다.