Question

我有一个关于如何最好地在Angular中实现功能的问题。我尝试了ng-click，ng-if，ng-show及其组合的一些解决方案，但在我的新手状态下没有运气。

目前我ng-repeat通过json数据数组li。

我想要实现的是当我点击其中一个循环的li时，它会显示＆＃39; info div＆＃39;点击li的相关信息（最好使用模板）。如果用户点击另一个li，它只需将数据切换出来再次正确显示。

非常感谢有关如何继续使用此功能的任何建议。我提供了现有代码以及CodePen。

JS：

var phonecatApp = angular.module('myApp', [])

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

HTML：

<div ng-app="myApp" ng-controller="starWarsCtrl">
  <input type="text" id="query" ng-model="query"/>
<div class="bscroll">
  <ul>
      <li class="box" ng-repeat="i in data | filter:query | orderBy: orderList">
        <h2>{{i.name}}</h2>
        <p>{{i.index}}{{i.cat}}</p>
    </li>
  </ul>
</div>
  <div class="info">The details would appear here</div>
</div>

Answer 1

最简单的解决方案是向ng-click添加<li>，调用函数来选择项目：

<li class="box" ng-repeat="i in data | filter:query | orderBy: orderList" ng-click="select(i)">
    <h2>{{i.name}}</h2>
    <p>{{i.index}}{{i.cat}}</p>
</li>

然后你的js：

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

和你的信息div：

<div class="info" ng-if="selectedItem">
    Name: <span ng-bind="selectedItem.name"></span><br>
    Index: <span ng-bind="selectedItem.index"></span>
    <div ng-if="selectedItem.cat">
        Category: <span ng-bind="selectedItem.cat"></span>
    </div>
</div>

这应该至少足以让你开始朝着正确的方向前进。

更新了笔：http://codepen.io/anon/pen/WrqXJa

如何在Angular中单击时从模板显示相关内容的div

1 个答案: