Question

我有一个角度为1.35的表格，如果用户点击该行左侧的图标，则会在该行下方显示“详细信息”行。这部分完美无缺：

  <tbody ng-repeat-start="p in tracking.packages | filter:tracking.search">
      <!-- <tr  ng-click="showDetails = !showDetails" ng-click="$event.originalEvent.dropdown" class="expander"> -->
      <tr class="expander">
        <td>
          <div class="row-arrow" ng-class="{'down-arrow' : showDetails}" ng-click="showDetails = !showDetails"></div>
        </td>
        <td>{{p.receivedDate | date: "MM/dd/yyyy &ndash; h:mma"}}</td>
        <td>{{p.carrier}}</td>
        <td>{{p.trackingNumber}}</td>
        <td>{{p.status}}</td>
        <td><span ng-if="p.status !== 'Attempted'"><span ng-if="tracking.currentStatus !== 'undelivered'">{{p.deliveredTo}}</span></span></td>
        <td>{{p.addressedTo}}</td>
      </tr>
      <tr class="row-details expanded" ng-show="showDetails" ng-class="{ 'active': showDetails }">
          <td>&nbsp;</td>
          <td colspan="7">
ETC....

现在我有一个新的要求，如果我们从搜索中获取此页面并获得仅一行的结果集（来自搜索字段），那么我需要扩展该行。

由于行显示并隐藏了showDetails变量的状态，我尝试将ng-init添加到图标中：

<div class="row-arrow" ng-class="{'down-arrow' : showDetails}" ng-click="showDetails = !showDetails" ng-init="{showDetails : shown==1}"> </div>

但显然我错了。

Answer 1

您可以使用Angular 1.3（测试版17）及更高版本中的filter alias in ng-repeat。

variable in expression as alias_expression - 您还可以提供一个可选的别名表达式，然后在应用过滤器后存储转发器的中间结果。通常，这用于在转发器上的筛选器处于活动状态时呈现特殊消息，但筛选结果集为空。

例如：item in items | filter:x as results会将重复项目的片段存储为结果，但只有在通过过滤器处理完项目后才会存储。

在您的情况下，您可以为转发器设置别名，如果别名的计数恰好为1项，则可以切换扩展变量。

<tbody ng-repeat-start="p in tracking.packages | filter:tracking.search as searchResults">
    ....
    <div class="row-arrow" ng-class="{'down-arrow' : showDetails}" 
         ng-click="showDetails = !showDetails" 
         ng-init="showDetails = (searchResults.length == 1)"> </div>

扩展表格行：如果结果集= 1，则自动展开详细信息行？

1 个答案: