Question

我有以下控制器：

app.controller('MainController', ['$scope', function($scope) {


$scope.taskCategories = {
    categories: [
        'work',
        'chores',
        'learning'
    ]
};

$scope.tasklist = {
    tasks: [{
            title: 'Email Gregory',
            category: 'work'
        }, {
            title: 'Clean the Kitchen',
            category: 'chores'
        }, {
            title: 'AngularJS',
            category: 'learning'
        }, {
            title: 'Hose Car',
            category: 'chores'
        }, {
            title: 'Email Jethro',
            category: 'work'
        }
    ]
};
}]);

到目前为止，我正在提取信息：

<div>
<li data-toggle="collapse" data-target="#work" class="nav_head workcat collapsed">
    <a href="#">Work <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="work">
    <li ng-repeat="tasks in tasklist.tasks | orderBy:'title' | filter: {category: 'work'}">
        {{ tasks.title }}
    </li>
    <li class="addwork">
        <a href="">
            <span class="fa-stack"> <i class="fa fa-2x fa-stack-2x fa-circle"></i><i class="fa fa-2x fa-stack-2x fa-plus-circle"></i> 
    </a>
   </span>
    </li>
</ul>

这样可以正常工作几次，每个类别一个，但我希望能够动态添加类别，所以我正在寻找一些方法来完成以下步骤：

所以，我需要循环所有类别。
在该循环中，我将遍历任务并打印出与categories.sindex（1）
然后将1添加到类别索引并再次运行，直到category.length耗尽

我不熟悉循环内部的循环，并且更加不熟悉再次以角度进行循环。有人有什么建议吗？

Answer 1

您可以对类别进行外循环（ng-repeat）：

<ul class="sub-menu collapse" id="work" ng-repeat="cat in taskCategories.categories">
    <li ng-repeat="tasks in tasklist.tasks | orderBy:'title' | filter: {category: cat}">
        {{ tasks.title }}
    </li>
    <li class="addwork">
        <a href="">
            <span class="fa-stack"> <i class="fa fa-2x fa-stack-2x fa-circle"></i><i class="fa fa-2x fa-stack-2x fa-plus-circle"></i></span>
        </a>

    </li>
</ul>

Fiddle

Answer 2

请参阅以下代码段

    angular.module('app',[]);

    angular.module('app').controller('myController',function($scope){
        $scope.taskCategories = {
    categories: [
        'work',
        'chores',
        'learning'
    ]
};

$scope.tasklist = {
    tasks: [{
            title: 'Email Gregory',
            category: 'work'
        }, {
            title: 'Clean the Kitchen',
            category: 'chores'
        }, {
            title: 'AngularJS',
            category: 'learning'
        }, {
            title: 'Hose Car',
            category: 'chores'
        }, {
            title: 'Email Jethro',
            category: 'work'
        }
    ]
};

        });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<body ng-app="app" ng-controller="myController">
    <ul>
  <li data-toggle="collapse" data-target=#{{c}} class="nav_head workcat" ng-repeat="c in taskCategories.categories">
        <a href="#"><span class="arrow"> {{c}}</span></a>
        <ul class="sub-menu collapse" id={{c}}>
        <li ng-repeat="tasks in tasklist.tasks | orderBy:'title' | filter: {category: c}">
        {{ tasks.title }}
        </li>
    </ul>
    </li>
</ul>

</body>

希望这有帮助！

循环遍历AngularJS中的2个不同对象

2 个答案: