Angularjs - ng-model with array with dynamic size

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

所以在范围方法返回 2 的情况下将有 2 个项目对象每个项目都有名称和总属性。

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

谢谢。

Answer 1

你必须

将作用域从控制器传递到指令。该指令将此范围传递给模板。

您可以在指令中执行此操作：

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

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