Thursday, 25 February 2016

Nested ng-repeat

 
 
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Angularjs/angular.js"></script>
    <script src="Script/AngularjsBinding.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="country in countries">
                {{country.name}}
                <ul>
                    <li ng-repeat="city in country.cities">
                        {{city.name}}
                        <ul>
                            <li ng-repeat="street in city.Area">
                                {{street.name}}
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>
JS
/// <reference path="../Angularjs/angular.js" />
var app = angular.module("myApp", [])
                 .controller("myController", function ($scope) {
                     var countries = [
                         {
                             name: "India", cities: [
                                {
                                    name: "Mumbai", Area: [
                                        { name: "Tunga" },
                                        { name: "Saki naka" },
                                        { name: "Powai" },
                                        { name: "Hiranandani" },
                                    ]
                                },
                                { name: "Chennai" },
                                { name: "UP" }
                             ]
                         },
                         {
                             name: "Australia", cities: [
                                { name: "Melbourne" },
                                { name: "Perth" },
                                { name: "Canberra" },
                                { name: "Sydney" }
                             ]
                         },
                         {
                             name: "England", cities: [
                                { name: "London" },
                                { name: "Menchester" },
                                { name: "Bristol" },
                                { name: "Birmingham" }
                             ]
                         },
                     ];
                     $scope.countries = countries;
                 });
 

No comments:

Post a Comment