通过2个不同的对象AngularJS

循环

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.index的字符串相匹配的任何任务（1）
然后加1至类别指数，并再次运行，直到category.length用完

我不熟悉循环内部的循环，更不熟悉循环中的角度。任何人有任何建议？

来源

2015-10-13 ladanta

你可以在类别做一个外环（NG-重复）：

<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

来源

2015-10-13 10:19:36

请参考下面的代码片段

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>

希望这有助于！

来源

2015-10-13 10:35:54

这工作非常好，谢谢！那种理解概念也好一点。 – ladanta

通过2个不同的对象AngularJS

回答

相关问题