The dynamically generated option in the select box with angularjs is done with the following code :
We can populate the options inside the select box and on selecting any value from the select box it reflect to some event. It will show the dynamically generated list in the select box.
HTML:
<div ng-app="myApp">
<div ng-controller="getData">
<select ng-model="productList" ng-options="list as list.id for list in fromService" ng-change="selectedOption(productList.id)">
<option value="">select</option>
</select>
<p>Ordered by: {{productList.id}}</p>
</div>
</div>
JS:
<script>
var myApp = angular.module("myApp",[]);
myApp.factory("getDataList", function($http){
return{
loadList: function(callback){
var url = "http://jsonplaceholder.typicode.com/comments?postId=12";
$http.get(url).success(callback)
}
}
})
myApp.controller("getData", function($scope,getDataList){
getDataList.loadList(function(data){
$scope.fromService = data;
});
});
</script>
In the above example, we have used the factory service in angularjs to get the list from the API through the ajax call. It has used http get request in angular. Then we have used this list in the specific controller where we want to use that loaded list. This is used in the select box to produce the list.
Here is the live demo attached. Hope this will help you.
0 Comment(s)