Angular.js: Sử dụng ng-model cho danh sách thả xuống trong ng-repeat

Question

Tôi đang gặp khó khăn trong việc hiểu cách sử dụng ng-model trong ng-repeat. Trong ngữ cảnh này, CargoItems là một danh sách các đối tượng có LoadPoint trên chúng. LoadPoint có các thuộc tính Id và Text.

Tôi muốn hiển thị văn bản, được liên kết với lựa chọn hiện tại trong trình đơn thả xuống, nhưng tôi cũng muốn theo dõi Id nào được chọn tất nhiên. Vì vậy, tôi không chắc chắn làm thế nào để cập nhật cả hai thuộc tính với các ràng buộc chọn, hoặc thông qua một sử dụng rõ ràng của các thẻ, hoặc sử dụng ng-tùy chọn mà tôi đã không thực sự tìm ra được nêu ra.

Vì vậy, hai câu hỏi:

1) làm thế nào để đúng cách ràng buộc cả văn bản và giá trị từ danh sách lựa chọn để Id và văn bản các tài sản trên CargoItem.LoadPoint của tôi? Tôi có một cảm giác ng-mô hình của tôi có thể sai?

2) làm cách nào để sử dụng tùy chọn ng để mặc định cho giá trị đã chọn? Tôi đã tìm ra điều này bằng cách viết thẻ tùy chọn của riêng tôi, nhưng tôi muốn sử dụng tùy chọn ng nếu có thể.

<div ng-repeat="cargoItem in cargo.CargoItems"> 
    <span>Selected Load Point: {{cargo.LoadPoint.Text}}</span> 
    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Id as loadPoint.Text for loadPoint in LoadPoints"></select> 
</div> 

Cảm ơn bạn trước!

Answer 1

1. Liên kết với toàn bộ tham chiếu đối tượng thay vì sử dụng thuộc tính 'Id' (loadPoint.Id). Để làm điều đó, chỉ cần thay đổi ng-options và loại bỏ các phần loadPoint.Id as:

   <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Text for loadPoint in LoadPoints"></select> 
   

2. Nếu bạn sử dụng cách tiếp cận trên và các tài liệu tham khảo chính xác để phản đối các LoadPoints, góc sẽ làm điều đó cho bạn tự động. Dưới đây là một ví dụ về cách sử dụng một LoadPoints trực tiếp đối tượng tham khảo:

   $scope.LoadPoints = [{ Id: '1', Text: 'loadPointA' },{ Id: '2', Text: 'loadPointB' }];   
   $scope.cargo = { 
       CargoItems: [{ 
        LoadPoint: $scope.LoadPoints[0] 
       }, { 
        LoadPoint: $scope.LoadPoints[1] 
       }] 
   }; 
   

   Sử dụng phương pháp này, cargoItem.LoadPoint (các ngModel) sẽ luôn luôn giữ một tham chiếu đến toàn bộ LoadPoints đối tượng (ví dụ { Id: '1', Text: 'loadPointA' }), và Id của nó không chỉ (tức là '1').

jsFiddle: http://jsfiddle.net/bmleite/baRb5/