2014-09-17 17 views
5

Với góc cạnh Tôi muốn tạo danh sách lựa chọn có giá trị mà id của lựa chọn của tôi (thuộc tính id thực của đối tượng) và tôi muốn ràng buộc nó một cách chính xác với chỉ thị ng-model.ng-options chọn giá trị danh sách được đặt thành id của sự lựa chọn của tôi và gắn nó chính xác với ng-model

Dưới đây là những gì tôi đã cố gắng:

<select ng-model="selectedPersonId"     
ng-options="p.id as p.name for p in People track by p.id"></select> 

$scope.People = [ 
    { name : "Fred", id : 1 }, 
    { name : "Joe", id : 2 }, 
    { name : "Sandra", id : 3 }, 
    { name : "Kacey", id : 4 }, 
    { name : "Bart", id : 5 } 
]; 

$scope.setTo1 = function(){ 
    $scope.selectedPersonId = 1; 
} 

http://jsfiddle.net/b7dyadnr/

Ở đây chọn giá trị tùy chọn là giá trị đúng (giá trị id của người dân) và văn bản là chính xác. Tuy nhiên, ràng buộc không hoạt động vì vậy nếu tôi đặt giá trị của $ scope.selectedPersonId lựa chọn không được phản ánh trong danh sách.

Tôi biết tôi có thể làm cho nó hoạt như thế này:

<select ng-model="selectedPersonId"     
ng-options="p.id as p.name for p in People"></select> 

http://jsfiddle.net/rgtbn2f5/

Có nó hoạt động tôi có thể đặt $ scope.selectedPersonId và những thay đổi được phản ánh trong danh sách. Nhưng sau đó id được sử dụng trong giá trị tùy chọn danh sách lựa chọn không phải là id của người thực tế!

<option value="0">Fred</option> <!--option value is 0 which is not the true id of fred --> 
<option value="1" selected="selected">Joe</option> 
... 

Tôi muốn sử dụng nó như thế này ngoại trừ việc tôi muốn sử dụng id thực của người trong giá trị tùy chọn chọn chứ không phải chỉ mục của mảng hoặc bất kỳ thứ gì mà nó sử dụng.

Nếu bạn tự hỏi tại sao tôi muốn sử dụng nó như thế này là do id được gửi đến API và mô hình cũng có thể được đặt bằng chuỗi truy vấn nên tôi phải làm cho nó hoạt động như thế này.

+0

ví dụ thứ hai bạn đang sử dụng id của người đó, chứ không phải chỉ số $. Nó đang làm việc như nó phải. Fred có id là 1. – pixelbits

+0

@pixelbits không có giá trị tùy chọn là fred là 0 không 1. Nó hoạt động miễn là tôi không gửi hoặc sử dụng giá trị tùy chọn của danh sách lựa chọn. –

+0

Tôi đang bối rối, giá trị tùy chọn của Fred rõ ràng là 1 từ bài đăng của bạn và trong demo fiddle – pixelbits

Trả lời

7

Đã xảy ra sự cố tương tự khi quay lại. Và có vẻ như p.id sẽ chỉ hoạt động ở một nơi trong số select hoặc trong trackexpr. Cách duy nhất nó làm việc cho tôi (giá trị đã được thiết lập để id) là như thế này:

<select 
ng-model="selectedPerson"     
ng-options="p as p.name for p in People track by p.id"></select> 

Mặc dù mã để lựa chọn người có id = 1 sẽ trông khá xấu xí:

$scope.setTo1 = function() { 
    $scope.selectedPerson = $scope.People.filter(function (item) { 
     return item.id == 1 
    })[0]; 
} 

Đây là jsfiddle.

Điều này là do bạn phải chỉ định ng-model cùng một mục bạn có trong bộ sưu tập ng-options vì chúng được so sánh theo tham chiếu. Đây là từ góc documentation:

Lưu ý: ngModel so sánh theo tham chiếu, không giá trị. Điều này rất quan trọng khi liên kết với một mảng các đối tượng. Xem ví dụ trong số jsfiddle này.

Vì vậy, tôi đã từ bỏ cuối cùng và để góc để thiết lập giá trị tùy chọn để bất cứ điều gì nó cần vì nó sẽ cho phép tôi để làm assignemnet như simeple như: $scope.selectedPersonId = 1

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