Angular: nested repeat test

http://angularjs.org/

by sberube

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<div ng-controller="MyCtrl">
    <button ng-click="refresh()">Refresh</button>
    <input ng-model="searchParams" type="text" placeholder="Search">
    <div class="list">
        <div ng-repeat="item in models.items | filter:outerSearch">{{item.displayName}}
            <div class="children">
                <button ng-click="toggleChildren(item.id)">Toggle Children</button>
                <input ng-model="models.itemChildrenSearch[item.id]" type="text" placeholder="Search" ng-if="models.itemChildren[item.id].length > 0">
                <div ng-repeat="itemChild in models.itemChildren[item.id] | filter:innerSearch(item.id)">{{itemChild.displayName}}</div>
            </div>
        </div>
    </div>
</div>

CSS

.list {
    border: 1px solid #cccccc;
    height: 300px;
    overflow: auto;
}
.children {
    padding-left: 20px;
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl', function($scope) {
    $scope.models = {
        items: [],
        itemChildren: {},
        itemChildrenSearch: {}
    };

    $scope.refresh = function () {
        $scope.models.items.length = 0;

        for (var i = 0; i < 100; i++) {
            $scope.models.items.push({
                'displayName': 'Item ' + i,
                    'id': i
            });
        }
    };

    $scope.toggleChildren = function (id) {
        if (!$scope.models.itemChildren[id]) {
            window.console.log('generating for ' + id);
            $scope.models.itemChildren[id] = [];

            for (var i = 0; i < 100; i++) {
                $scope.models.itemChildren[id].push({
                    'displayName': 'Item Child ' + i,
                        'id': i
                });
            }
        } else {
            $scope.models.itemChildren[id] = null;
        }
    }

    $scope.innerSearch = function (id) {
        return function (item) {
            if (!$scope.models.itemChildrenSearch[id]) {
                return true;
            }
            if (item.displayName.indexOf($scope.models.itemChildrenSearch[id]) !== -1) {
                return true;
            }
            return false;
        };
    };

    $scope.outerSearch = function (item) {
        if (!$scope.searchParams) {
            return true;
        }

        if (item.displayName.indexOf($scope.searchParams) !== -1) {
            return true;
        }
        return false;
    }

    //$scope.refresh();

});