AngularJS: Chọn không thay đổi tùy chọn đã chọn về thay đổi biến phạm vi bị ràng buộc

Question

Tôi có một điều khiển chọn. Các tùy chọn của nó được tạo động từ mảng các đối tượng của phạm vi. Trên ứng dụng init tôi muốn chọn một tùy chọn cụ thể bằng cách thay đổi biến bị ràng buộc trên phạm vi.

Nó không hoạt động khi tùy chọn ng của tùy chọn trả về đối tượng đầy đủ. Tuy nhiên, nó hoạt động khi chọn ng-option trả về chuỗi.

Có lỗi góc cạnh hoặc tôi làm điều gì sai?

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

Biểu thức "Theo dõi" phải được sử dụng để làm ví dụ trong công việc câu hỏi của tôi. Xem thêm chi tiết ở đây: http://leoshmu.wordpress.com/2013/09/11/making-the-most-of-ng-select/

Cập nhật 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

Điều quan trọng là các đối tượng với các phím và các giá trị như nhau không bằng nhau cho mỗi khác (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 

Thay đổi $scope.valueObject = { /* similar object */ } thành $scope.valueObject = $scope.options[0] và mọi thứ sẽ hoạt động.

Answer 3

Nó sẽ làm việc cho bộ điều khiển như:

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