Menu ▼


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>





comments powered by Disqus


Search dotnetlearners.com