AngularJs 在 ng-repeat 中分组

Question

我正在尝试使用 ng-repeat 两次来按项目分组。我在点击每个周期时添加项目。循环 ID 是根据被点击的项目生成的。My fiddle work is here. 任何帮助将不胜感激。我正在尝试显示如下

周期 ID - 0

循环 ID 为 0 的项目

---

周期 ID - 1

循环 ID 为 1 的项目

---

<div ng-controller="MyCtrl">
  <div ng-repeat="cycle in Cycles">
    <hr> {{cycle}} 
    <font color=red>
    <br>
    show cycle group by cycle id
    <div ng-repeat="subinfo in cycle.cycleData">
      {{subinfo}}
    </div>
    </font>

    <span ng-click="addCycleData($index)">
      <br>
      <b>Add Cycle Data</b>
    </span>
    <hr>
  </div>
</div>
var myApp = angular.module('myApp', []);

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

function MyCtrl($scope) {
  $scope.addCycleData = function(i) {
    $scope.Cycles.push({
      "cycleId": i,
      "cycleData": [{
        "Id": 0,
        "startDate": "",
        "endDate": "",
        "name": "ghi"
      }]
    })
  }

  $scope.Cycles = [{
    "cycleId": 0,
    "cycleData": [{
      "Id": 0,
      "startDate": "",
      "endDate": "",
      "name": "ghi"
    }]
  }]
}

Answer 1

请尝试将您的 html 代码组织得井井有条，否则一切都很好：

例如，我对您的 html 代码做了一些小改动：

<div ng-controller="MyCtrl">
  <div ng-repeat="cycle in Cycles">
  <hr> {{$index+1}}. cycleId- {{cycle.cycleId}} 
    <font color=red>
    <br>
    item with cycle id: {{cycle.cycleId}}
    </font>
    <div ng-repeat="subinfo in cycle.cycleData">
      <tr>cycle ID: {{subinfo.Id}}</tr>
      <br>
      <tr>startDate: {{subinfo.startDate}}</tr>
      <br>
      <tr>endDate: {{subinfo.endDate}}</tr>
      <br>
      <tr>name: {{subinfo.name}}</tr>
    </div>

    </div>

    <span ng-click="addCycleData($index)">
      <br>
      <b>Add Cycle Data</b>
    </span>
    </hr>
  </div>
</div>

及其工作正常

Answer 2

This Sample show to you how you can add Parent And Child for each item:

Updated version 1: now you can remove childs and parents too

Updated version 2: set default object

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

function MyCtrl($scope) {

   $scope.Cycles = [
     {
       name: "Cycles",
       cycleData: []
     }
   ];
  
   $scope.addCycleParent = function(){
     $scope.Cycles.push({name: "Cycles",cycleData: []});
   }
  
   $scope.addCycleData = function(index) {
     $scope.Cycles[index].cycleData.push({name: "test"});
   };

   $scope.removeChild = function(parentIndex, index) {
     $scope.Cycles[parentIndex].cycleData.splice(index, 1);
   };
  
   $scope.removeParent = function(index) {
     $scope.Cycles.splice(index, 1);
   };

}

<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="addCycleParent()">
  Add Parent
</button>
<ul>
  <li  ng-repeat="cycle in Cycles">
    {{cycle.name}} {{$index}} 
    <ul>
      <li ng-repeat="subinfo in cycle.cycleData">
        {{subinfo.name}} {{$index}} <button ng-click="removeChild($parent.$index, $index)">remove me</button>
      </li>
    </ul>
    <button ng-click="addCycleData($index)">
        Add Child
    </button>
    <button ng-click="removeParent($index)">
        remove parent
    </button>
  </li>
</ul>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</div>

AngularJs 在 ng-repeat 中分组

AngularJs group by in ng-repeat

javascript

angularjs

ng-repeat

angularjs-ng-repeat

---

---