通過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

回答

相關問題