Loading dynamic data in block select options in angularjs
Below is a portion of my controller code.
restApp.getAllcomponents().then(function(data){
$scope.compList = data.components;
var j=0;
while(j < $scope.compList.length){
$scope.allOptions = $scope.compList[j];
console.log($scope.allOptions);
j++;
}
});
View
<div class="field-box">
<label>Components:</label>
<!--Here I need select box with dynamic generated options-->
</div>
Above print.log prints like
Object {id: 27, name: "loruth water point", latitude: 4.453488123, longitude: 35.36021409} adminContentAttachmentsTabCtrl.js:33
Object {id: 28, name: "kibish", latitude: 5.286289986, longitude: 35.82917452} adminContentAttachmentsTabCtrl.js:33
Object {id: 30, name: "Ekalale", latitude: 4.434588531, longitude: 35.72135923} adminContentAttachmentsTabCtrl.js:33
Object {id: 34, name: "karubangorok", latitude: 4.506236007, longitude: 35.4201746} adminContentAttachmentsTabCtrl.js:33
Object {id: 35, name: "nakitoe kakumon", latitude: 4.214576564, longitude: 35.35912495} adminContentAttachmentsTabCtrl.js:33
Object {id: 36, name: "kaikor mission", latitude: 4.516645656, longitude: 35.42262991}
So what I need here is to load the response data into the select box, "id" in the parameter value, and "name" in the option content.
How can i do this? Any help ...
+3
source to share
3 answers
This is how you create a selection from your list, I am using a static list, just replace it with your dynamic one.
JavaScript
angular.module('app', []).controller('MyCtrl', function($scope) {
$scope.list = [{
id: 27,
name: "loruth water point",
latitude: 4.453488123,
longitude: 35.36021409
},
{
id: 28,
name: "kibish",
latitude: 5.286289986,
longitude: 35.82917452
},
{
id: 30,
name: "Ekalale",
latitude: 4.434588531,
longitude: 35.72135923
},
{
id: 34,
name: "karubangorok",
latitude: 4.506236007,
longitude: 35.4201746
},
{
id: 35,
name: "nakitoe kakumon",
latitude: 4.214576564,
longitude: 35.35912495
},
{
id: 36,
name: "kaikor mission",
latitude: 4.516645656,
longitude: 35.42262991
}];
});
Html
<div ng-app="app">
<div ng-controller="MyCtrl">
<h2>List:</h2>
<select ng-model="selectedItem" ng-options="item.name for item in list">
<option value="">-- choose --</option>
</select>
<h2>Selected:</h2>
{{selectedItem.name}}
</div>
</div>
+4
source to share
$scope.list = [{
id: 27,
name: "loruth water point",
latitude: 4.453488123,
longitude: 35.36021409
},
{
id: 28,
name: "kibish",
latitude: 5.286289986,
longitude: 35.82917452
},
}];
<select class="ui-select" data-ng-options="r.id as r.name for r in list " name="status" data-ng-model="users.status">
<option value="">--Select--</option>
</select>
Hope that helps :)
+2
source to share