angularjs - AngularJS ngOptions track by 不会将整个对象设置为 ngModel

Question

这是我的 json 对象：

 $scope.todos = [{
    name: 'angular',
    field: ['a', 'b', 'c', 'd'],
    id: 1
  }, {
    name: 'asd',
    field: ['a', 'b', 'c', 'd', 'e'],
    id: 2
  }];

我给选择为：

<select ng-model="dashboard.type" ng-options="item as item.name for item in todos track by item.name"></select>

Now when an option is chosen i want another select which iterates upon ngModelof previous select. 下一个看起来像：

<select ng-model="dashboard.label" ng-options="item as item for item in dashboard.type.field"></select>

当我手动选择选项时它工作正常但是当它们是$scope.dashboard.type.name = 'qwe'我的脚本中的dashboard.type（例如：）中的值时，它用于track by选择选项并将其保存在dashboard.type，而不是保存整个对象它只是保存使用的值在track by选项中。

仪表板的值。类型：

1. 当我手动选择选项时： {"name":"qwe","field":["a","b","c","d","f"],"id":3}
2. 当使用 track by 时： {"name":"qwe"}

注意：我不能使用track by item. 它必须是对象的属性item。它可以是name或id。

这是一个plnkr。

编辑 ：

正如许多人所指出的，我想澄清一下，我不能将对象初始化为todos列表的任何值。这是因为dashboard.type.name每次值都会不同，并且todos列表的对象数量从 10 到 100 不等。现在我必须迭代列表todos检查是否todos[index].name==someName并分配相关对象。我正在积极尝试避免这种解决方案（因为必须有更好的方法）。

注意： 我也尝试使用ng-change并将实际对象分配给dashboard.type.name但仅在手动选择选项时才有效，这似乎已经正常工作。使用时不分配对象track by。

重要： $scope.dashboard.type.name = 'qwe'只是一个例子。的值$scope.dashboard.type.name可能会在每次加载页面时发生变化。

PS：我也应该早点提到这个。对不起，我的错！

Answer 1

这个问题不是因为track by。通过做设置一个默认值$scope.dashboard.type.name = 'qwe'，导致ng-model看起来像$scope.dashboard.type = {name : 'qwe'}。而不是以这种方式选择默认值，您应该使用$scope.dashboard.type = $scope.todos[2];. 这将确保整个对象设置为$scope.dashboard.type.

编辑 plunker

Answer 2

要使用默认值初始化模式，您可以使用 ng-init。例如

 <select ng-init="dashboard.type = todos[2]" ng-model="dashboard.type" ng-options="item as item.name for item in todos track by item.name">
  </select>

Answer 3

在 html 中的 ng-init 上调用此函数

ng-init ="initialize();"

在js中

$scope.dashboard={};//initialize object
$scope.dashboard.type ={}//initialize object

$scope.initialize =function(){


//no need to iterate if it is certain that your Id and index is always same suppose your initial id is 3

//then
var currId =3;//suppose initial id is there
$scope.dashboard.type =$scope.todos[currId]

}

这是它的codepen http://codepen.io/vkvicky-vasudev/pen/MeexmK