Javascript 以角度显示当前li下的相关内容

我目前有一个重复列表，重复JSON数据中的类别名称。每个

li

都是与该类别相关的人员的重复列表（请参阅）。我要做的是在当前嵌套的

li

下打开一个div，显示有关单击的个人的数据。除了在每个

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>

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;
  }

})

---

快速的答案是添加

&& cat === selectedItem.cat

如果，则发送到您的

数据。这将检查cat&selectedItem是否正确匹配