AngularJS: Wybierz nie zmienia wybranej opcji przy zmianie zmiennej zakresu pętli

Question

Mam kontrolę wyboru. Jego opcje są generowane dynamicznie z zakresu obiektów. Przy uruchomieniu aplikacji chcę wybrać konkretną opcję, zmieniając powiązaną zmienną w zakresie.

Nie działa, gdy opcja ng opcji zwraca pełny obiekt. Działa jednak, gdy opcja ng-opcji zwraca ciąg znaków.

Czy to błąd kątowy, czy coś robię źle?

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 Fiddle: http://jsfiddle.net/apuchkov/FvsKW/6/

Answer 1

"Śledź przez" wyrażenie musi być użyty, aby zrobić przykład w mojej pracy z pytaniami. Więcej szczegółów tutaj: 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}; 
}; 

Answer 2

Kluczem jest to, że obiekty o tych samych kluczy i wartości nie są sobie równe inne (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 

Zmień $scope.valueObject = { /* similar object */ } na $scope.valueObject = $scope.options[0] i wszystko powinno działać.

Answer 3

powinien pracować dla takiego regulatora:

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