Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to populate options in select in angularjs with example

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 451
    Comment on it

    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)

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: