9

選択コントロールがあります。そのオプションは、スコープのオブジェクトの配列から動的に生成されます。アプリの初期化時に、スコープのバインド変数を変更して特定のオプションを選択したいと考えています。

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/

4

3 に答える 3

10

"Track by" expression has 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/

Updated 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};
};
于 2013-09-30T03:32:04.127 に答える
5

重要なのは、同じキーと値を持つオブジェクトは互いに等しくないということです (参照 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]と、すべてが機能するはずです。

于 2013-09-27T18:53:21.300 に答える