Question

我正在尝试打印任何与第一个循环的索引匹配的项目。

例如：第一个循环使li被归类为cat1_li，第二个被归类为cat2_li，第三个被归类为cat3_li

然而，我能得到的最接近的是在不同的列表中打印出来的。在其他ng-repeats中使用ng-repeats并且似乎无法找到问题的位置时遇到了麻烦。我可以看到它为什么打印多个列表，但不知道如何纠正这种行为。

有人愿意看看吗？

HTML：

    <div>
     <ul class="tasks" ng-repeat="cat in taskCategories.categories">
    {{ cat }}
    <li ng-repeat="tasks in tasklist.tasks | orderBy:'category' | filter: {category: cat}" class="cat{{ index + 1 }}_li">
        <span>
          <span class="panel_title">
          {{ tasks.title }}
          </span>
        </span>
    </li>
</ul>
</div

对象：

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


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

$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'
        }, {
            title: '400 lbs',
            category: 'lifting'
        }
    ]
};
}]);

Answer 1

如果您尝试在嵌套$parent.$index内使用类别索引，则可以使用ng-repeat：

var app = angular.module('app', []);

app.controller('MainController', ['$scope',
  function($scope) {
    $scope.taskCategories = {
      categories: [
        'work',
        'chores',
        'learning',
        'lifting'
      ]
    };

    $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'
      }, {
        title: '400 lbs',
        category: 'lifting'
      }]
    };
  }
]);

.cat1_li {
  background-color: yellow;
}

.cat2_li {
  background-color: cyan;
}

.cat3_li {
  background-color: pink;
}

.cat4_li {
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
  <ul class="tasks" ng-repeat="cat in taskCategories.categories">
    {{ cat }}
    <li ng-repeat="tasks in tasklist.tasks | orderBy:'category' | filter: {category: cat}" class="cat{{ $parent.$index + 1 }}_li">
      <span>
        <span class="panel_title">
          {{ tasks.title }}
        </span>
      </span>
    </li>
  </ul>
</div>

<强>更新

在阅读问题中的评论后，您根本不需要两个ng-repeat：

var app = angular.module('app', []);

app.controller('MainController', ['$scope',
  function($scope) {
    $scope.taskCategories = {
      categories: [
        'work',
        'chores',
        'learning',
        'lifting'
      ]
    };

    $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'
      }, {
        title: '400 lbs',
        category: 'lifting'
      }]
    };
    
    $scope.mappedTasks = $scope.tasklist.tasks.map(function(task) {
      task.category = $scope.taskCategories.categories.indexOf(task.category);
      return task;
    }).sort(function(a, b) {
      return a.category > b.category;
    });;
    
    console.log($scope.mappedTasks);
  }
]);

.cat1_li {
  background-color: yellow;
}

.cat2_li {
  background-color: cyan;
}

.cat3_li {
  background-color: pink;
}

.cat4_li {
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainController">
  <ul class="tasks">
    <li ng-repeat="task in mappedTasks" class="cat{{ task.category + 1 }}_li">
      <span>
        <span class="panel_title">
          {{ task.title }}
        </span>
      </span>
    </li>
  </ul>
</div>

Answer 2

每个ng-repeat使用传递的数据创建子范围，并在该范围内添加额外的$index变量。

所以你需要做的是达到父范围，并使用$index。

HTML：

<li ng-repeat="tasks in tasklist.tasks | orderBy:'category' | filter: {category: cat}" class="cat{{ $parent.$index + 1 }}_li">

NG-Repeat生成包含动态类的列表

2 个答案: