Ng-Bind-9

 

In this example, we have an array named flowersArray with the flower name and price. We print the array of flowers using ng-repeat directive in the table form and bind the flower name and flower price with the td tag of table.

 
 
 
<!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="myApp"> <div ng-controller="myController"> <table> <thead> <tr> <th>Flower Name</th> <th>Price</th> </tr> </thead> <tbody> <tr ng-repeat="flower in flowersArray"> <td ng-bind="flower.name"></td> <td ng-bind="flower.price"></td> </tr> </tbody> </table> <br /> </div> <script> var app = angular.module("myApp", []); app.controller('myController', ['$scope', function ($scope) { $scope.flowersArray = [{ name: "Rose", price: 17 }, { name: "Sun Flower", price: 12 }, { name: "Merry Gold", price: 32 }, { name: "Lily", price: 45 }, { name: "Bluebell", price: 26 }, { name: "Bergamot", price: 33 }, { name: "Bellflower", price: 21 }, { name: "Begonia", price: 26 }, { name: "Aster", price: 34 }] }]); </script> </body> </html>
Output