AngularJS Expression using ng-bind with Array

In this AngularJS expression example you will learn how to use expression to display array elements in HTML DOM elements.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

AngularJS ng-bind with Array

AngularJS ng-bind with Array Expressions.

AngularJS Expression using ng-bind with Array Syntax

 <li class="animate-repeat" ng-repeat="customer in customers">  
  {{$index + 1}}. <strong>{{customer.firstName}} </strong>  
  <strong>{{customer.lastName}}</strong> Email <strong>{{customer.email}}</strong>.  
</li>  
<li class="animate-repeat" ng-if="results.length == 0">  
  <strong>No results found...</strong>  
</li>

AngularJS Expression using ng-bind with Array Example

<html>  
<head>  
<title>AngularJS Expression with Array Using ng-bind Code Example</title>  
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">  
</Script>  
</head>  
 <fieldset style="background-color:#DDE4E9;font-family:arial;">                      
    <legend>AngulerJS Expression with Array using ng-bind Example</legend> 
<body ng-app=''>  
  <div ng-init="customers=[  
  {firstName:'Jimi', lastName:'Scotts', email:'jimi@xyz.com'},  
  {firstName:'Paul', lastName:'Adam', email:'paul.a@xyz.com'},  
  {firstName:'Peter', lastName:'England', email:'peter@xyz.com'},  
  {firstName:'Rechard', lastName:'Jeff', email:'reachardjeff@xyz.com'}  
]">   
<ul class="example-animate-container">  
    <li class="animate-repeat" ng-repeat="customer in customers">  
      {{$index + 1}}. <strong>{{customer.firstName}} </strong>  
      <strong>{{customer.lastName}}</strong> Email <strong>{{customer.email}}</strong>.  
    </li>  
    <li class="animate-repeat" ng-if="results.length == 0">  
      <strong>No results found...</strong>  
    </li>  
  </ul>  
</div>  
  </fieldset>  
</body>  
</html>

See Live Example

« Previous