What are the Angular ways to generate <option> elements that requires value and text dynamically from data for <select>?

Question

What are the Angular ways to generate <option> elements that requires value and text dynamically from data for <select>?

204 Views Asked by Jenna Leaf At 17 September 2020 at 22:51

I want to generate an option list using angular expression to achieve

<select id="sel">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select>

on selection of which it will return an object or a simple value.

I have data from the server that resembles this

["string1", "string2", "string3"]

and sometimes this

[
   {val: '01', Text: 'struct1'},
   {val: '02', Text: 'struct2'},
   {val: '03', Text: 'struct3'}
]

and sometimes

[
   {id: '01', obj: {grp: 'A', Text: 'struct1'}},
   {id: '02', obj: {grp: 'A', Text: 'struct2'}},
   {id: '03', obj: {grp: 'A', Text: 'struct3'}}
];

Original Q&A

There are 1 best solutions below

**Jenna Leaf** · Accepted Answer · 2020-09-17T22:51:47.503000

To accomplish the smooth transformation from data objects to a list of selectable objects (options) with one line code, we need to understand how angularJS structure their template!! Here is how ==>

XXX as YYY for ZZZ in ZZZZ

XXX is your final value that you pick from the options
YYY is your value text of your value
ZZZ is one item of your ZZZZ items

From above you can derive various flavors of result from the user's on click on selection. The entire code is like that

HTML==>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<pre>itm for itm in stringArray : Result==> {{L1}}</pre>
<select ng-model="L1" ng-options="itm for itm in stringArray">
<option value="">the strings</option>
</select>
<hr/>

<pre>itm as itm.Text for itm in structArray : Result==> {{L2}}</pre>
<select ng-model="L2" ng-options="itm as itm.Text for itm in structArray">
<option value="">the structs</option>
</select>
<hr/>

<pre>itm.val as itm.Text for itm in structArray : Result==> {{L3}}</pre>
<select ng-model="L3" ng-options="itm.val as itm.Text for itm in structArray">
<option value="">the structs</option>
</select>
<hr/>

<pre>itm as itm.Text for itm in structArray track by itm.val : Result==> {{L4 | json}} </pre>
<select ng-model="L4" ng-options="itm as itm.Text for itm in structArray track by itm.val">
<option value="">the structs</option>
</select>
<hr/>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.stringArray = ["string1", "string2", "string3"];
    $scope.structArray = 
    [
       {val: '01', Text: 'struct1'},
       {val: '02', Text: 'struct2'},
       {val: '03', Text: 'struct3'},
    ];
  
});
</script>
</body>
</html>

Notice that I have also inserted a blank option inside the option list after the deploy of objects from that in-line template statement!

Notice that, you can return json object from the select change event. That means, you can expect an object picked by the user from selecting an option inside the list which is very powerful!

What are the Angular ways to generate <option> elements that requires value and text dynamically from data for <select>?

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in NG-OPTIONS

Related Questions in ANGULARJS-NG-OPTIONS

Trending Questions

Popular # Hahtags

Popular Questions