javascript AngularJS：选择不会更改绑定范围变量更改时的选定选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19057822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS : Select doesn't change selected option on change of bound scope variable
提问by Alexander Puchkov
I have a select control. Its options are generated dynamically from scope's array of objects. On app init I want to select a specific option by changing bound variable on the scope.
我有一个选择控件。它的选项是从范围的对象数组动态生成的。在应用程序初始化时，我想通过更改范围上的绑定变量来选择特定选项。
It doesn't work when select's ng-option returns full object. However, it works when select's ng-option returns string.
当 select 的 ng-option 返回完整对象时，它不起作用。但是，它在 select 的 ng-option 返回字符串时起作用。
Is it angular bug or I do something wrong?
是角度错误还是我做错了什么？
HTML:
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:
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 Fiddle: http://jsfiddle.net/apuchkov/FvsKW/6/
回答by Alexander Puchkov
"Track by" expressionhas to be used to make example in my question work. More details here: http://leoshmu.wordpress.com/2013/09/11/making-the-most-of-ng-select/
必须使用“Track by”表达式来举例说明我的问题。更多细节在这里：http: //leoshmu.wordpress.com/2013/09/11/making-the-most-of-ng-select/
Updated JsFiddle: http://jsfiddle.net/apuchkov/FvsKW/9/
更新 JsFiddle：http: //jsfiddle.net/apuchkov/FvsKW/9/
HTML
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
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};
};
回答by Sean Vieira
The key is that objects with the same keys and values are not equal to each other (ref ES 5.1 Specification 11.9.6):
关键是具有相同键和值的对象彼此不相等（参考 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
Change $scope.valueObject = { /* similar object */ }to $scope.valueObject = $scope.options[0]and everything should work.
更改$scope.valueObject = { /* similar object */ }为$scope.valueObject = $scope.options[0]，一切都应该有效。
回答by antklim
It should work for such controller:
它应该适用于这样的控制器：
function selectCtrl($scope) {
$scope.options = [
{label: 'a', value: '1', someId: 333},
{label: 'b', value: '2', someId: 555}
];
$scope.valueObject = $scope.options[ 0 ];
};
