ng-options in Angular JS

ng-

Angular JS provides ng-options directive to bind HTML to select dropdown with options. With ng-options use ng-model to store selected options in dropdown. Here is an example. Angular controller has collection of authors scope variable.

var myApp = angular.module('myApp');
myApp.controller('myCtrl', ['$scope', function($scope){
      $scope.authors=[
                {
                    id:0,
                    name:"John Daniel",
                    age:"34",
                    books:[
                        {
                                 name:"Fundamentals of Chemistry",
                                 publishedDate:"07-23-2014"
                        },{
                                 name:"Train Your Brain",
                                 publishedDate:"7-03-2016"
                        },
                        {
                                name:"Business Economics",
                                publishedDate:"12-12-2015"
                        }
                    ]
                
                },{
                        id:1,
                        name:"David Manthon",
                        age:"57",
                        books:[
                            {
                                name:"Principles of Algebra",
                                publishedDate:"11-01-2013"
                            },{
                                name:"Think and Grow",
                                publishedDate:"09-12-2015"
                            },{
                                name:"Finance and Marketing",
                                publishedDate:"11-13-2012"
                            },
                            {
                                name:"The Art Of War",
                                publishedDate:"06-05-2011"
                            }
                    ]

                },{
                        id:2,
                        name:"Melisa Bosch",
                        age:"39",
                        books:[
                            {
                                name:"Java for Beginners",
                                publishedDate:"10-10-2012"
                            },
                            {
                                name:"Stay Hungry Stay Foolish",
                                publishedDate:"08-11-2012"
                            }
                      ]
                },
                {
                        id:3,
                        name:"Simeck Volja",
                        age:"42",
                        books:[
                            {
                                name:"Pro C Programming",
                                publishedDate:"01-02-2015"
                            },
                            {
                                name:"You Can Win",
                                publishedDate:"11-20-2013"
                            }
                    ]
                }
          ]
}]);

HTML Template:

<body ng-app="myApp">
    <div ng-controller="myCtrl">
<h2>Authors</h2>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="author in authors" > {{author.name}}
      <br/>
      <strong>Books:</strong>
      <select class="form-control" ng-model="author.selectedbook" ng-options="book.name for book in author.books" >
        <option value="">--Select--</option>
      </select>
      <strong>Selected Book:</strong>{{author.selectedbook.name}}
    </li>
    
  </ul>

   </div>
</body>

We will use ng-repeat directive to iterate all objects in authors’s collection & then loop through each book object in books array of each author.

Use list-group bootstrap class to the li tag to display a visually formatted list. Here, we are iterating through each author object & displaying each author name using {{author.name}} angular expression tag. Each book in books array is bind to every option of select dropdown.

ng-model: we have used author.selectedbook as ng-model here to store selected book. By doing this there is one more property called selectedbook created in each author object and the same is available in controller’s scope.

When we select any book of particular author the value of select dropdown is bind to the author.selectedbook & we can access name property of each book like this author.selectedbook.name.

Refer fig. below.

angular-ng-options

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>