list - AngularJS在列表中加载第一项的详细信息

Question

我有一个列表视图，允许我单击并显示其详细信息：

<li ng-repeat="item in data.items" ng-click="show(item.id)" ng-class="{'active':selectedId==item.id}">
  <div class="item-list">.. </div>
...
</li>

当我单击项目时，我使用 ng-show 和 ng-hide 基本显示详细信息，或者如果列表中没有项目则隐藏。

我想了解如何在页面加载时有条件地在列表中显示第一项的详细信息。谢谢！

Answer 1

您可以像这样使用 ngRepeat 指令的 $first 布尔值：

<div ng-show="$first">Details</div>

给出以下数据的完整示例：

{items:[item:{id:01, name:item1, price:1}, item:{id:02, name:item2, price:2}]}

和 HTML：

<ul>
    <li ng-repeat="item in data.items" ng-click="show(item.id)" ng-class="{'active':selectedId==item.id}">
      {{item.id}} <span ng-show="$first">{{item.name}} - {{item.price}}</span>
    </li>
</ul>

给出以下输出：

<ul>
    <li>01 <span>item1 - price1</span></li>
    <li>02 </li>
    <li>03 </li>
</ul>

显然，输出的元素更多，但这是为了清楚起见。