Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Displaying and Adding server-supplied data into your drop down list using AngularJs.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 383
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: