If you want to extract data from the server through hitting an api and display it in your dropdown list of select box using angular js, you need make a service(factory) with some functions and then inject this into your controller.
Here is the code for your reference:-
mainApp.factory('getAppConstants', function ( $http ) {
var factory = {
query: function () {
return $http.get(BASE_URL+'getappconstants?responsetype=json');
},
setData: function () {
this.query().success( function(data1) {
localStorage.setItem( "constantDataStore", JSON.stringify(data1) );
} )
},
getData: function () {
var serverData = localStorage.getItem( "constantDataStore" );
return JSON.parse(serverData).data.something_constants;
}
}
return factory;
});
mainApp.factory('constantData', function ( $http, getAppConstants) {
var promise;
var factory = {
getNotificationData: function () {
getAppConstants.setData();
console.log(getAppConstants.getData());
promise = getAppConstants.getData().notifications_frequency;
return promise;
}
};
return factory;
});
In the above code i have used factory getAppConstants which contains functions-query that hits the api which return an object. Setdata that is used to set the data into the local storage. Getdata that is used to retrieve the data.
The object return is like this:
notifications_frequency: Object
30: "30 Seconds"
300: "5 Minutes"
3600: "1 Hour"
21600: "6 Hours"
43200: "12 Hours"
86400: "24 Hours"
And the other factory contains a function that stores the notifications_frequency data into promise. This function will be called from the controller.
Now you need to use angular.foreach that invokes function once for each item in the object collection.
mainApp.controller( "notificationcontroller", function( $scope, $http, $state, $rootScope, constantData ) {
$scope.notifyHrList = [{ id:'', value:'(Select frequency)'}];
angular.forEach(constantData.getNotificationData(), function(value, key) {
var item = { id:key, value:value };
$scope.notifyHrList.push(item);
});
})
In this code snippet I have called the getNotificationData and pushed items into the list which is used in the HTML. After that when an api is hit from this controller. The complete list will get displayed.
Here is the HTML:
<div class="form-group">
<label for="frequency" class="col-sm-3 control-label" id="expiremonth_label">Frequency</label>
<div class="col-sm-9" style="margin-left: -5px;">
<select name="frequency" id="frequency" ng-model="frequency" class="form-control country-code currPeriod card-expiry-month" ng-options="notifyHrObj.id as notifyHrObj.value for notifyHrObj in notifyHrList" ng-init = "frequency = notifyHrList[0].id" ng-style="{'padding-left': '110px'}">
</div>
</div>
0 Comment(s)