AngularJS：バウンドスコープ変数の変更時に選択されたオプションを変更しない

Question

私は選択コントロールを持っています。そのオプションはスコープのオブジェクト配列から動的に生成されます。 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/

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 ]; 
};