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>

显然，输出的元素还有一些，但这是为了清楚起见。

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

1 个答案: