2015-04-02 14 views
9

Am phải đối mặt với vấn đề trong việc hiển thị giá trị được chọn trong danh sách thả xuống góc. nó hoạt động khi tôi đưa ra như thế nàyAngularJS thả xuống không hiển thị được lựa chọn giá trị

$scope.selectedItem = $scope.items[1]; 

không làm việc, nếu tôi đưa trực tiếp giá trị mà

$scope.selectedItem = { name: 'two', age: 27 }; 

HTML:

<html ng-app="app"> 
    <body> 
    <div ng-controller="Test"> 
     <select ng-model="selectedItem" ng-options="item.name for item in items"> 
     </select> 
    </div> 
    </body> 
</html> 

JS:

var app = angular.module('app',[]); 
app.controller('Test',function($scope){ 
    $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }]; 
    $scope.selectedItem = $scope.items[1]; 
}); 

CODEPEN: http://codepen.io/anon/pen/zxXpmR

SOLUTION:

Cảm ơn bạn samir-das. Tôi cố định theo đề xuất của bạn.

var choosen_value = { name: 'two', age: 27 }; 
angular.forEach($scope.items, function(item){ 
    if(angular.equals(choosen_value, item)){ 
    $scope.selectedItem = item; 
    } 
}); 

Trả lời

6

Vâng, bởi vì

$scope.items[1]{ name: 'two', age: 27 } là điều hoàn toàn khác nhau.

{ name: 'two', age: 27 } là một đối tượng hoàn toàn khác nhau trong khi $scope.items[1] là một phần của đối tượng $scope.items

Khi bạn đặt một cái gì đó trong bản mẫu sử dụng {{}}, góc cạnh thêm nó vào danh sách watcher của nó.

SO khi góc đặt nó trong danh sách theo dõi, nó là một đối tượng (ví dụ: { name: 'two', age: 27 }) đó là khác biệt so với $scope.items.

selectedItem được gắn với đối tượng mà bạn đặt trong bộ điều khiển. Nói tóm lại, trong khi kiểm tra bẩn, ý chí góc kiểm tra selectedItem chống { name: 'two', age: 27 } KHÔNG chống $scope.items

Hy vọng bạn hiểu ý tôi chứ

+0

Bạn có cách nào để sửa lỗi này? –

+2

Bạn sẽ phải sử dụng cùng một đối tượng. Trước tiên, bạn có thể tìm kiếm mục mà bạn muốn bắt đầu, sau đó chỉ định mục đó – Samir

1

Đây là không một tính năng góc/vấn đề, đó là một hệ quả của cách phản đối bình đẳng làm việc tại Javascript. This article thực hiện một công việc khá tốt trong việc giải thích những gì đang xảy ra một cách ngắn gọn và đưa ra một số ví dụ. Kiểm tra nguồn của lodash's isEqual method (nó sẽ đưa bạn đến định nghĩa của baseIsEqualDeep cuối cùng) để xem làm thế nào những gì bạn đang cố gắng để đạt được có thể được thực hiện trong JS tinh khiết.

Trong mọi trường hợp, tôi không nghĩ rằng có một cách dễ dàng để đạt được điều này trong góc, bạn sẽ phải viết lại đường ng-options công trình và có thể bạn không muốn đến đó ...

1

Trong góc cạnh, các mảng và các đối tượng được truyền qua tham chiếu trong khi chuỗi, số và boolean được truyền theo giá trị. Vì vậy, góc giải thích $scope.items[1]{ name: 'two', age: 27 } là hai đối tượng khác nhau. Đó là lý do tại sao ràng buộc của bạn không thành công khi bạn thực hiện trực tiếp $scope.selectedItem = { name: 'two', age: 27 }; và tìm nó trong '$ scope.items'.

6

Như được giải thích trong các câu trả lời khác, trong khi hai đối tượng có thể có cùng thuộc tính và giá trị, chúng là hai đối tượng khác nhau nên góc cạnh không xem chúng bằng nhau.

Bạn tuy nhiên có thể sử dụng các biểu track by trong ng-options để xác định một tài sản mà sẽ quyết định sự bình đẳng:

ng-options="item.name for item in items track by item.name"

http://codepen.io/anon/pen/WbWMrp

Các vấn đề liên quan