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

我有一个关于如何最好地实现角度特性的问题。我已经尝试了许多解决方案，包括

ng click

、

ng if

、

ng show

以及它们的组合，但在我的新手状态下运气不佳

目前，我通过json数据数组

li

重复

我想要实现的是，当我单击其中一个循环的
li
时，它会打开并显示“info div”，其中包含所单击li的相关信息（最好使用模板）。如果用户单击另一个li，它只需关闭数据以再次正确显示

如果您对如何继续使用此功能有任何建议，我们将不胜感激。我已经提供了我现有的代码以及一个

JS:

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>




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



细节将出现在这里
最简单的解决方案是在
中添加一个
ng单击
，它调用一个函数来选择项目：

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

和您的信息部门：

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


名称：

索引：
类别：

这至少足以让你朝着正确的方向开始

更新笔：

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

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