AngularJS：选择不会更改绑定范围变量的选定选项

Question

我有一个选择控件。它的选项是从范围的对象数组动态生成的。在应用程序初始化时，我想通过更改范围上的绑定变量来选择特定选项。

当 select 的 ng-option 返回完整对象时它不起作用。但是，当 select 的 ng-option 返回字符串时，它可以工作。

是角度错误还是我做错了什么？

HTML：

<div ng-controller="selectCtrl" ng-app>
    Doesn't work when select's ngModel value is object:<br />
    <select ng-model="valueObject" ng-options="o.label for o in options"></select><br />
    <pre>{{valueObject | json}}</pre>

    Works when select's ngModel value is string:<br />
    <select ng-model="valueString" ng-options="o.value as o.label for o in options"></select>
    <pre>{{valueString | json}}</pre>    

JS：

function selectCtrl($scope) {    
   $scope.options = [
       {label: 'a', value: '1', someId: 333},
       {label: 'b', value: '2', someId: 555}
   ];    
   $scope.valueObject = {label: 'a', value: '1', someId: 333};
   $scope.valueString = '1';
};

JS 小提琴：http://jsfiddle.net/apuchkov/FvsKW/6/

Answer 1

“Track by”表达式必须用于在我的问题工作中做例子。更多细节在这里：http://leoshmu.wordpress.com/2013/09/11/making-the-most-of-ng-select/

更新的 JsFiddle：http://jsfiddle.net/apuchkov/FvsKW/9/

HTML

<div ng-controller="selectCtrl" ng-app>
    Doesn't work when select's ngModel value is object:<br />
    <select ng-model="valueObject" ng-options="o.label for o in options"></select><br />
    <pre>{{valueObject | json}}</pre>

    Does work when select's ngModel value is object AND 'track by' expression is used:<br />
    <select ng-model="valueObject" ng-options="o.label for o in options track by o.value"></select><br />
    <pre>{{valueObject | json}}</pre>
</div>

JS

function selectCtrl($scope) {    
    $scope.options = [
        {label: 'a', value: '1', someId: 333},
        {label: 'b', value: '2', someId: 555}
    ];    
    $scope.valueObject = {label: 'a', value: '1', someId: 333};
};

Answer 2

关键是具有相同键和值的对象不相等（ref ES 5.1 Specification 11.9.6）：

// Return true if x and y refer to the same [in-memory] object.
// Otherwise, return false.
> var one = {label: 'a', value: '1', someId: 333}
> var two = {label: 'a', value: '1', someId: 333}
> one === one
true
> two === two
true
> one === two
false
> one == two
false

将$scope.valueObject = { /* similar object */ } 更改为$scope.valueObject = $scope.options[0]，一切正常。

Answer 3

它应该适用于这样的控制器：

function selectCtrl($scope) {
   $scope.options = [
       {label: 'a', value: '1', someId: 333},
       {label: 'b', value: '2', someId: 555}
   ];    
   $scope.valueObject = $scope.options[ 0 ];
};