làm thế nào để thiết lập mặc định 'chọn' ng-mô hình cho một đối tượng?

Question

Tôi đang cố gắng làm một giao diện công cụ tìm kiếm với góc cạnh. Người sử dụng chọn một số thông số trong một hình thức, bấm vào nút "tìm kiếm" và sau đó nó lấp đầy các url với các thông số sử dụng $location.search()

các thông số giao diện tìm kiếm được sử dụng để xây dựng các hình thức:

params = { 
    milestones: [ "a", "b", "c", "d", etc. ], 
    properties: [ 
     { "name": "name A", type: "text" }, 
     { "name": "name B", type: "checkbox" }, 
     { etc. } 
    ] 
} 

bên trong bộ điều khiển :

$scope.query = $location.search(); // get the parameters from the url 
$scope.search = function (query) { // set the parameters to the url 
    $location.search(query);  
}; 

và html có dạng

<select ng-model="query.milestone_name" ng-options="ms for ms in params.milestones"> 
    <option value="">-select milestone-</option> 
</select> 
<select ng-model="property" ng-options="prop.name for prop in params.properties" ng-change="query.property_name=property.name"> 
<!-- if the object 'property' was passed in the url, it would look like this `%5Bobject%20Object%5D`, so its 'name' parameter is converted to a string --> 
    <option value="">-select property-</option> 
</select> 
<span ng-switch="property.type"> 
    <label ng-switch-when="text">{{query.property_name}}: <input type="text" ng-model="query.property_value"></label> 
    <label ng-switch-when="checkbox">{{query.property_name}}: <input type="checkbox" ng-model="query.property_value"></label> 
</span> 
<button ng-click="search(query)">search</button> 

và một nơi khác trong trang là danh sách kết quả.

người dùng cũng có thể truy cập vào một trang kết quả tìm kiếm với một địa chỉ như thế này:

http://myapp.com/search?milestone_name=a&property_name=name%20A 

hầu như tất cả mọi thứ hoạt động tốt: danh sách kết quả được hiển thị, "cột mốc" tham số là lựa chọn trước với giá trị chính xác trong thành phần select, nhưng không phải là tham số "thuộc tính" vì nó không phải là một chuỗi, nó là một đối tượng.

làm cách nào tôi có thể đặt giá trị mặc định (ng-model) của thành phần được chọn thành đối tượng?

hoặc bất kỳ ý tưởng nào khác về cách tôi nên thực hiện việc này?

Answer 1

Khi sử dụng một mảng của các đối tượng cho chọn để lặp qua, chỉ thị ng-options cần phải có một thuộc tính của đối tượng để phù hợp chống lại (và phân biệt giữa mảng)

Sử dụng track by phần của ví dụ khai Chỉ thị

<select ng-model="property" ng-options="prop.name for prop in params.properties track by prop.name" ng-change="query.property_name=property.name"> 
<!-- if the object 'property' was passed in the url, it would look like this `%5Bobject%20Object%5D`, so its 'name' parameter is converted to a string --> 
    <option value="">-select property-</option> 
</select> 

Answer 2

ng-options đang tạo một số tùy chọn để sử dụng với ng-model. Trong cú pháp của bạn (prop.name for prop in params.properties), bạn đã yêu cầu nó liên kết với đối tượng được tìm thấy trong mảng (ngược lại với thuộc tính trên đó - đó là những gì bạn muốn làm) và sử dụng thuộc tính tên của nó làm giá trị hiển thị. Vì vậy, khi bạn thử và đặt ng-model là một đối tượng không nằm trong mảng ng-options thì không có gì xảy ra - tôi đoán vì nó sử dụng tham chiếu/bình đẳng nông và không phải là sự bình đẳng sâu sắc. Vì vậy, những gì bạn nên làm là:

• Chuyển đổi đối tượng thành ng-options thành một chuỗi.

• Sử dụng một cú pháp có liên quan đến phím, chẳng hạn như:

prop.name as prop.name for prop in params.properties

http://jsfiddle.net/C5ENK/

Nếu điều đó không phù hợp với nhu cầu của bạn cho tôi biết tại sao và tôi sẽ xem liệu Tôi có thể giúp thêm.

Answer 3

tôi tìm thấy một loại dung dịch ...

khi lựa chọn một tài sản, nó tiết kiệm chỉ số của đối tượng này và sau đó khi tải trang, nó đặt ng-mô hình của select với giá trị của chỉ số này. nó sử dụng điều này: example để đặt chỉ mục và example này để nhận giá trị của chỉ mục này trong mảng đối tượng.

Answer 4

Bạn có thể sử dụng biểu mẫu hiểu biểu thức này trong ngOptions: label group by group for value in array. Danh sách thả xuống Html sẽ chỉ hiển thị tên của đối tượng đã chọn. Mô hình sẽ chứa toàn bộ đối tượng được chọn.Bạn có thể đặt đối tượng được chọn từ bộ điều khiển.

<select ng-model="property" 
      ng-options="prop as prop.name for prop in params.properties"> 
    </select> 

Kiểm tra điều này plnkr example.