[英]AngularJS : Select doesn't change selected option on change of bound scope variable
我有一個選擇控件。 它的選項是從作用域的對象數組動態生成的。 在app init上,我想通過更改范圍上的綁定變量來選擇特定選項。
當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/
在我的問題工作中,必須使用“跟蹤”表達式來表示 。 更多細節: 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};
};
關鍵是具有相同鍵和值的對象彼此不相等( 參考ES 5.1規范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]
,一切都應該有效。
它應該適用於這樣的控制器:
function selectCtrl($scope) {
$scope.options = [
{label: 'a', value: '1', someId: 333},
{label: 'b', value: '2', someId: 555}
];
$scope.valueObject = $scope.options[ 0 ];
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.