angularjs ng-repeat 雙層迴圈

  • 708
  • 0

巢狀

<script src="~/Scripts/ngcontroller.js"></script>
<div ng-app="myModule">
    <div ng-controller="myController">
        
        <ul ng-repeat="country in countries">
            <li>
                {{country.name}}-index={{$index}}
                <ul ng-repeat="city in country.Cities">
                    <li>{{city.name}}-parentindex={{$parent.$index}}  index={{$index}}</li>
                </ul>

            </li>
             
        </ul>
    </div>

</div>

ngcontroller.js

var myApp = angular.module("myModule", []);

myApp.controller("myController", function ($scope) {

    var countries = [{
        name: "UK",
        Cities: [{ name: "London" }, { name: "Manchester" }, {name:"Birmingham"}]
    }, { name: "USA", Cities: [{ name: "Los Angles" }, { name: "Chiago" }, {name:"Houston"}]}
    ];
    

    $scope.countries = countries;
});