How to set an 'select' ng object for an object?

Question

I am trying to make angular search engine interface. The user selects some parameters in the form, clicks "search", and then fills in the URL using the parameters $location.search()

search interface parameters that are used to build the form:

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

inside the controller:

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

and html forms

 <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> 

and elsewhere on the page is a list of results.

the user can also access the search results page with the following URL:

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

almost everything works fine: a list of results is displayed, the milestone parameter is pre-selected with the correct value in the select component, but not the property parameter, because it is not a string, it is an object.

How can I set the default (ng-model) of the select component for an object?

or any other idea on how I should do this?

Answer 1

When using an array of objects to select an iteration, the ng-options directive must have an attribute of the object that must match (and distinguish between arrays)

Use the track by section of directive declarations, for example

 <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

You can use this form of expression of understanding in ngOptions: label group group for value in . The Html drop-down list displays only the name of the selected object. The model will contain the entire selected object. You can set the selected object from the controller.

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

Note the plnkr example .

Answer 3

ng-options generates some options that will be used with ng-model . In your syntax ( prop.name for prop in params.properties ), you told him to associate with the object found in the array (how to resist the property on it is what you want to do) and use its name property as the display value. Therefore, when you try to set ng-model as an object that is not in the ng-options array, nothing happens - I assume because it uses reference / shallow equality and not deep equality. So what you need to do:

• Convert the ng-options object to an array of strings.

• Use syntax containing keys, such as:

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

http://jsfiddle.net/C5ENK/

If this does not meet your needs, let me know why, and I will see if I can help further.

Answer 4

I found a peculiar solution ...

when choosing a property, it saves the index of this object, and then, when the page loads, it sets the select ng-model to the value of this index. he uses this: an example to set the index and this example to get the value of this index in an array of objects.