AngularJS ngrepeat Directive (original) (raw)

Angular-JS ng-repeat Directive

Last Updated : 09 Aug, 2019

Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a number of times or once per item in a collection of items. ng-repeat is mostly used on arrays and objects. ng-repeat is similar to a loop that we have in C, C++ or other languages but technically it instantiates a template(normally a set of HTML structures) for each element in a collection that we are accessing. Angular maintains a $index variable as a key to the element which is currently being accessed and a user can also access this variable.Syntax :

{{keyName}}

Here "MyObjectName" is a collection that can be an object or an array and you can access each value inside it using a "keyName".Example 1

  1. Create an app.js file for the app. javascript var app = angular.module('myApp',[]); app.controller('MainCtrl', function($scope){ $scope.names = ['Adam','Steve','George','James','Armin']; console.log($scope.names); }); Line 1- Created an app module named "myApp" with no dependencies.Line 3- Main controller for our application.Line 4- Array of strings "names".
  2. Create index.html page html ` Angular ng-repeat

    Here is the name list

    • {{name}}
    ` **Line 5-** Include all the dependencies like jquery, angular-js and app.js file**Line 12-** Use ng-repeat directive to get one name from names array at a time and display it.
  3. Output : Example 2
  4. app.js file javascript var app = angular.module('myApp',[]); app.controller('MainCtrl', function($scope){ $scope.strings= ['Geeks','For','Geeks']; console.log($scope.strings); });
  5. We have a list of three strings.index.html html ` Angular ng-repeat

    Here is the string list

    • index"isusedherebecausethereareduplicateentriesinourlisti.e."Geeks".DuplicatekeysarenotallowedbecauseAngularJSuseskeystoassociateDOMnodeswithitems."trackbyindex" is used here because there are duplicate entries in our list i.e. "Geeks". Duplicate keys are not allowed because AngularJS uses keys to associate DOM nodes with items. "track by index"isusedherebecausethereareduplicateentriesinourlisti.e."Geeks".DuplicatekeysarenotallowedbecauseAngularJSuseskeystoassociateDOMnodeswithitems."trackbyindex", will cause the items to be keyed by their position in the array instead of their value
    • Output :
      **Applications:
      1. ng-repeat can be used to iterate through an array which requires less lines of code than the usual javascript method.
      2. Filters can be used with ng-repeat to create an easy to implement search bar. **References