Angular - Nested Loop

Nested Loop

by Amitesh Kumar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="category in model.categories"> <span> Category: {{ category.name }} </span>

        <p ng-repeat="subCategory in getSubCategories(category.Id)">{{ subCategory.name }}</p>
    </div>
</div>

JavaScript

debugger;
angular.module("app", [])
    .controller('ctrl', ['$scope',

function ($scope) {
    $scope.model = {
        categories: [{
            "Id": 1,
            name: '1'
        }, {
            "Id": 2,
            name: '2'
        }],
        subCategories: [{
            "parentId": 1,
            name: 'a1'
        }, {
            "parentId": 1,
            name: 'a2'
        },
                       {
            "parentId": 2,
            name: 'a3'
        }]
    }
    $scope.getSubCategories = function(parentId){
        var result = [];
        for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
            if(parentId === $scope.model.subCategories[i].parentId){
                result.push($scope.model.subCategories[i]);               
            }
        }
        console.log(parentId)
        return result;
    }
}])