AngularJS 中ngOptions使用时需要注意的问题
使用angularjs 中的select时遇到一个问题,设定了下拉框的集合,绑定了ngModel,并且该model的值有一个预设的值,当显示时的select下拉框则找不到预设值:
$scope.Options = {
selectedOption:{
id:0,
name:"test0"
},
availableOptions:[{
id:0,
name:"test1"
},
{
id:1,
name:"test2"
},
{
id:2,
name:"test3"
}]
};
后来在api说明中找到了缘由地址:
Complex Models (objects or collections)
复杂model:默认情况下,ngModel通过引用而不是值来监控model。
当你想预选中一个option时,例如如果你设置一个object和你集合中的某个object相等,ngOptions将不能够设定这个选项,这是因为objects的引用是不相同的。
所以你需要始终引用你集合中的那个项来进行预设定select的值。例如$scope.selected = $scope.collections[3];
另外一个解决方式是使用track.因为ngOptions将会根据标识而非引用来track每项,例如如果你的collection items中有一个属性是id,那将可以使用track by item.id
另外一个对象或者集合的问题是ngModel不会检测一个对象的属性或者一个集合中的items是否改变。由于这个原因,ngOptions添加了一个$watchCollection
来监控model的改变,当表达式包含了一个track by clause
或者select包含多行属性,则这个允许ngOptions触发一次options的重绘,即使实际的object/collection 没有改变,但是只有object的一个属性或者collection中的一个item改变。
需要注意的是$watchCollection
对object的属性(或者是model是个数组时,collection的items)会做一个浅比较。这意味着改变一个object内部更深的而非第一层级的属性将不会触发重绘。