Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-select with an object and its properties in angularjs

I have been trying to figure out how to use an array if objects as the key values for an ng-select directive

this is the data I want to use

$scope.selectValues [
    {name: "Options 1", value: "11"}, 
    {name: "Options 2", value: "22"}
    {name: "Options 3", value: "33"}
];

and I want the output to be

<select>
    <option value="11">Options 1</option>
    <option value="22">Options 2</option>
    <option value="33">Options 3</option>
</select>

Can anyone explain how to do this ? and show a an example of the directive set up? I have looked at the docs but they don't have an example that fits for the this model.

like image 979
Subtubes Avatar asked Dec 19 '13 02:12

Subtubes


People also ask

What is Ng select in AngularJS?

AngularJS ng-selected Directive The ng-selected directive sets the selected attribute of an <option> element in a <select> list. The option will be selected if the expression inside the ng-selected attribute returns true. The ng-selected directive is necessary to be able to shift the value between true and false .

What is Ng select used for?

Ng-select allows to provide custom selection implementation using SELECTION_MODEL_FACTORY . To override default logic provide your factory method in your angular module.

How do I filter with Ng-options?

In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.

What is NG model directive in AngularJS?

AngularJS ng-model Directive The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.


1 Answers

ng-options supports both array and object based data source. For example:

Array based data source:

$scope.options = ["Blue", "Red", "Yellow"]

<select ng-model="selected"
        ng-options="for o in options">

Object based data source:

$scope.options = {
  "Blue": "color_1",
  "Red": "color_2",
  "Green": "color_3"
}

<select ng-model="selected"
        ng-options="name for (name, value) in options">

However, you are using an incompatible data structure for the array based option. You can use like this:

<select ng-model="selected"
        ng-options="o.name for o in options">

and use the selected value as selected.value. (selected is bound to one of the objects in the array). This won't work if you want to submit the form via HTTP, so in this case you should convert the options to one of the data structure mentioned above.

I've included these three usage here: http://plnkr.co/IEBQkqJNifY5MZWloDP6


Edit: So I looked at the docs again today and found the way to work with your original data structure.

<select ng-model="selected"
        ng-options="o.value as o.name for o in options">

The plnkr is updated also.

like image 128
tungd Avatar answered Sep 22 '22 21:09

tungd