[AngularJS]在角中显示当前的李下的相关的内容

发布时间: 2017/4/16 20:31:31
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我公司目前已重复的列表重复从我的 JSON 数据的类别名称。每个 li 是它自己重复的列表与该类别相关的人 (见CodePen) 想做什么是打开一个 div 嵌套的电流下 li 显示关于单击的个人数据。我演示了它工作除了它打开下每个 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;
  }

})

解决方法 1:

添加快速回答

&& cat === selectedItem.cat

给你 data-ng-if 。这检查猫和 selectedItem 是否适当匹配。

赞助商