Question

我目前有一个重复列表，重复我的JSON数据中的类别名称。每个li都是自己重复的与该类别相关的人员列表（请参阅CodePen）我想要做的是在当前嵌套li下打开一个显示有关该数据的div个人点击了。我的演示有它工作，除了它在EACH li下打开而不是当前的。我知道可能有一个类似于我在演示中的select(i)的解决方案，但是不能让它起作用。任何帮助将不胜感激。

我的HMTL：

<div data-ng-app="app" data-ng-controller="starWarsCtrl">
    <ul>
        <li data-ng-repeat="cat in getCategories()">
          <h2>{{cat}}</h2>
          <div ng-click="select(i)" ng-repeat="i in data | filter:{cat: cat}">
    <p>{{i.name}}</p>
  </div>
      </li>
    </ul>
</div>

我的AngularJS：

angular.module('app', ['ngAnimate'])

.controller('starWarsCtrl', function ($scope) {
  $scope.data = [
    {"name": "Obi-Wan Kenobi",
     "index":88,
      "cat": "jedi"},
    {"name": "Yoda",
     "index":69,
      "cat":"jedi"},
    {"name": "Lando",
     "index":31,
      "cat": "smuggler"},
    {"name": "Han Solo",
     "index":90,
      "cat": "smuggler"},
    {"name": "Darth Vader",
     "index":98,
      "cat": "sith"},
    {"name": "Jar-Jar Binks",
     "index":80,
      "cat": "alien"},
    {"name": "Mace Windu",
     "index":45,
      "cat": "jedi"},
    {"name": "Chewy",
     "index":76,
      "cat": "smuggler"}
  ];

   $scope.select = function (item) {
    $scope.selectedItem = item;
  }

  $scope.getCategories = function() {
    var categories = [];

     angular.forEach($scope.data, function(item) {
    //item.cat is a string
    if (categories.indexOf(item.cat) == -1) {
      categories.push(item.cat);
    }
});
    return categories;
  }

})

Answer 1

快速回答是添加

&& cat === selectedItem.cat

到data-ng-if。这检查了猫和猫是否selectedItem正确匹配。

在Angular中的CURRENT li下显示相关内容

1 个答案: