Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to set the default 'select' ng-model to an object?

Tags:

angularjs

I am trying to do a search engine interface with angular. The user selects some parameters in a form, click "search" and then it fills the url with the parameters using $location.search()

the search interface parameters which 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 the html of the form

<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 somewhere else in the page is the list of results.

the user can also access to a search result page with an url like this:

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

almost everything works fine : the 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's not a string, it's an object.

how can i set the default value (ng-model) of the select component to an object ?

or any other idea on how i should do this ?

like image 894
François Romain Avatar asked Sep 01 '13 21:09

François Romain


People also ask

How do I set default selected value in ng options?

Use ng-init to set default value for ng-options .

How do you change the value of an NG model?

ngModelChange event parameter contains the changed value. If we use two way binding syntax for ngModel the value will be updated. So the default (ngModelChange) function will update the value of ngModel property. i.e., user.Name .

What are ng model options?

The ng-model-options directive is used to control the binding of an HTML form element and a variable in the scope. You can specify that the binding should wait for a specific event to occur, or wait a specific number of milliseconds, and more, see the legal values listed in the parameter values below.

What is NG model in HTML?

The ng-model directive binds an HTML form element to a variable in the scope. If the variable does not exist in the scope, it will be created.


2 Answers

When using an array of objects for the select to iterate over, the ng-options directive needs to have an attribute of the object to match against (and differentiate between arrays)

Use the track by section of the directive declaration eg

<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>
like image 110
Zak Henry Avatar answered Sep 20 '22 23:09

Zak Henry


You can use this form of comprehension expression in ngOptions: label group by group for value in array. Html drop down list will display only name of selected object. Model will contain whole selected object. You can set selected object from controller.

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

Check this plnkr example.

like image 20
Vasiliy Kevroletin Avatar answered Sep 23 '22 23:09

Vasiliy Kevroletin