ng-repeat directive in AngularJS


The ng-repeat directive will repeat the HTML elements based on elements in the given expression.

Syntax:
<ul> <li ng-repeat="val in list">{{ val }}</li> </ul>

Example:
    Countries List
  • {{ country.CountryName }}

Source code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> </head> <body> <div ng-app="SampleApp" ng-controller="SampleCntrl"> <ul> Countries List <li ng-repeat="country in CountiresList">{{ country.CountryName }} </li> </ul> </div> <script> var myapp = angular.module("SampleApp", []); myapp.controller("SampleCntrl", function ($scope) { $scope.CountiresList = [{ CountryName: "USA" }, { CountryName: "UK" }, { CountryName: "England" }, { CountryName: "India" }, { CountryName: "Australia"}]; }); </script> </body> </html>