Question

我正在使用Angular JS并且需要在所选元素行下打开一个相关内容div（类.info-bg）。因此，如果我单击第1行，它将打开第1行下的隐藏div。如果我单击第2行内容，它将显示在第2行下。但是，对于实现此目的的最佳方法，我感到有点失落，任何帮助将不胜感激。这是我到目前为止所做的CodePen。

我的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>

MY JS：

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

Answer 1

我认为最好的＆＃39;这里的方法是在第二组项目下面添加第二个隐藏的div。这不是很干，所以您可以考虑添加一个自定义指令 - 这将允许您以干燥方式创建具有相应隐藏div的多个集。

请参阅以下AngularJS文档以编写您自己的指令：https://docs.angularjs.org/guide/directive

因此，假设您创建了一个名为filtered-set的指令，并将其附加到您的模块：

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

然后使用：

创建filtered-set.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>

然后在HTML中使用以下内容，替换原始代码中两个重复的项目/信息HTML：

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

当前行下方的Angular Open Div

1 个答案: