Angularjs 当前行下方的角度开放Div

我正在使用Angular JS，需要在所选元素行下打开一个相关内容的div（类为

.info bg

）。因此，如果单击第1行，它将打开第1行下的隐藏div。如果单击第2行内容，它将显示在第2行下。然而，对于实现这一目标的最佳方法，我有点不知所措，任何帮助都将不胜感激。以下是我迄今为止所做工作的一个例子

我的HTML：

<div data-ng-app="app" data-ng-controller="starWarsCtrl">
  <input type="text" id="query" data-ng-model="query"/>
  <div class="bscroll">
    <ul>
        <li class="box" data-ng-repeat="i in data | filter : {cat: 'jedi'} : true | filter:query |orderBy: orderList" data-ng-click="select(i)">
          <h2>{{i.name}}</h2>
          <p>{{i.cat}}</p>
      </li>
    </ul>
  </div>
   <div class="info-bg" data-ng-if="selectedItem">
    Name: <span data-ng-bind="selectedItem.name"></span><br>
    Index: <span data-ng-bind="selectedItem.index"></span>
    <div data-ng-if="selectedItem.cat">
        Category: <span data-ng-bind="selectedItem.cat"></span>
    </div>
  </div>
  <div class="bscroll">
        <ul>
        <li class="box" data-ng-repeat="i in data | filter : {cat: 'smuggler'} : true | filter:query |orderBy: orderList" data-ng-click="select(i)">
          <h2>{{i.name}}</h2>
          <p>{{i.cat}}</p>
      </li>
    </ul>
  </div>
</div>

---

我认为这里最好的方法是在第二组项目下面添加第二个隐藏div。这不是很干，所以你可以考虑添加自定义指令，这将允许你以干燥的方式创建多个具有相应隐藏div的集合。 要编写自己的指令，请参阅以下AngularJS文档：

因此，假设您创建了一个名为

过滤集

的指令，并将其附加到模块：

.directive('filtered-set', function() {
  return {
    templateUrl: 'filered-set.html'
  };
});

然后使用以下内容创建

filteredset.html

模板：

  <div class="bscroll">
    <ul>
      <li class="box" data-ng-repeat="i in items" data-ng-click="select(i)">
        <h2>{{i.name}}</h2>
        <p>{{i.cat}}</p>
      </li>
    </ul>
  </div>
  <div class="info-bg" data-ng-if="selectedItem">
    Name: <span data-ng-bind="selectedItem.name"></span><br>
    Index: <span data-ng-bind="selectedItem.index"></span>
    <div data-ng-if="selectedItem.cat">
      Category: <span data-ng-bind="selectedItem.cat"></span>
    </div>
  </div>

{{i.name}
{{i.cat}



名称：

索引：
类别：

然后在HTML中使用以下内容，替换原始代码中两次重复的items/info HTML：

<filtered-set items="data | filter : {cat: 'jedi'} : true | filter:query |orderBy: orderList"></filtered-set>

<filtered-set items="data | filter : {cat: 'jedi'} : true | filter:query |orderBy: orderList"></filtered-set>