Ng-Bind-Template-2

 

In this example, we have an array named flowersArray with the name and guantity of the flower. We bind this array with the dropdown list and as we select any flower name from the select list then name and quantity both values of the selected flower bind with the span tag using ng-bind-template.

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controllerName"> <label>Flower <select ng-model="flower" ng-options="flowerArray as flowerArray.name for flowerArray in flowersArray"></select></label><br /> <b>Flower:</b> <span data-ng-bind-template="{{flower.name}}"></span> <b>Quantity:</b> <span data-ng-bind-template="{{flower.quantity}} "></span> <br /> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.flowersArray = [{ name: "Rose", quantity: 17 }, { name: "Sun Flower", quantity: 12 }, { name: "Merry Gold", quantity: 32 }, { name: "Lily", quantity: 45 }, { name: "Bluebell", quantity: 26 }, { name: "Bergamot", quantity: 33 }, { name: "Bellflower", quantity: 21 }, { name: "Begonia", quantity: 26 }, { name: "Aster", quantity: 34 }] }]); </script> </body> </html>
Output