Angularjs - 具有动态大小的数组的 ng-model

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

ty-project 只是一个指令

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

typrojectTemplate 是一个带有 2 个输入的简单模板，如下所示：

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

这是我的控制器

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

所以如果 range 方法返回 2 将有 2 个项目对象 每个项目都有名称和总属性。

如何将项目绑定到控制器？

谢谢。

Answer 1

你必须将范围从控制器传递给指令。该指令将此范围传递给模板。

你可以在你的指令中这样做：

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

我不知道，你是否将控制器分配给视图。