在 AngularJS 中为 ng-model 创建动态名称答案

【问题标题】：Create dynamic names for ng-model in AngularJS在 AngularJS 中为 ng-model 创建动态名称
【发布时间】：2014-08-27 11:56:04
【问题描述】：

问题 -

ng-model 不是动态创建的。我的输入框是动态创建的，我正在尝试创建 ng-model 动态，例如 test[1]、test[2] 等，但是当我触发表单时，我只得到了所有输入元素的 test[shiftnumber]。

HTML 代码 -

<body ng-controller="myCtrl">
    <select id="shiftnumbers"
            ng-model="event.shiftnumber"
            ng-change="addShiftNumber(event.shiftnumber)"
            ng-options="timeslot.value as timeslot.name for timeslot in shiftnumbers"
            ng-init="event.shiftnumber = shiftnumbers[0].value"
            class="btn">
    </select>
    <div ng-repeat="shiftnumber in selectedShiftnumbers">
      <input type="text" name="test{{shiftnumber}}" ng-model="test[shiftnumber]" /> {{shiftnumber + 1}}
    </div>
</body>

脚本代码 -

var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope){

    $scope.shiftnumbers = [];
    for(var i=0; i< 23; i++) {
        $scope.shiftnumbers.push({name: i, value: i});
    }

    $scope.addShiftNumber = function(num){
      $scope.selectedShiftnumbers = [];
      for(var i=0; i< num; i++) {
        $scope.selectedShiftnumbers.push(i);
      }
    }
});

PLNKR - http://plnkr.co/edit/PL9sVAKn5UsZECPsOvnk?p=preview

【问题讨论】：

标签： javascript html angularjs angular-ngmodel

【解决方案1】：

因为你没有定义$scope.test[0]、$scope.test[1]（你使用的是ng-model="test[shiftnumber]"，所以应该有$scope.test[shiftnumber]）。

试试

$scope.addShiftNumber = function(num){
  $scope.test = [];
  $scope.selectedShiftnumbers = [];
  for(var i=0; i< num; i++) {
    $scope.selectedShiftnumbers.push(i);
    $scope.test.push('');
  }
}

plunker

【讨论】：