Question

我正在使用Angular创建一个Web应用程序，其中包含一个带有可折叠tr的表。但是当我添加一些ng-if条件时（如果数组中有数据），ng-show就会停止工作。这是没有ng-if条件的工作代码：https://plnkr.co/edit/UPFF1RboN22RAVM8r18i?p=preview

      <thead>
    <tr role="row">
      <th class="details-control sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 26px;">
        <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Projects: activate to sort column descending" aria-sort="ascending" style="width: 306px;">Foods</th>
        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=" EST: activate to sort column ascending" style="width: 84px;"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> Type</th>
        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Contacts: activate to sort column ascending" style="width: 107px;">Count</th>
    </tr>
  </thead>

<tbody ng-repeat="data in allData" >
  <tr>
      <td>
          <div class="cursor-pointer" ng-click="rows = !rows">
              <!-- <span class="fa" ng-class="{'fa-caret-down': rows, 'fa-caret-right': !rows}"></span> -->
              <p>open</p>
          </div>
      </td>
      <td>{{data.foodName}}</td>
      <td></td>
      <td>{{data.totalCount}}</td>
  </tr>
    <tr ng-repeat="a in data.avaiable" ng-show="rows" ng-if="allData && allData.length > 0">
      <td></td>
      <td></td>
      <td>{{a.foodType}}</td>
      <td>{{a.foodCount}}</td>
  </tr>

这是带有ng-if条件的无效代码。如果您看到plk https://plnkr.co/edit/IvlIXIfWpogNi5VXo2Eh?p=preview，您会发现行没有显示。为什么呢？

Answer 1

Cosmin 是对的。

ng-if 会创建一个新的子范围。

您必须使用$parent来使用您在ng-if内使用的父变量

将您点击更改为：

ng-click="$parent.rows = !rows"

工作Plunker

显示找不到数据使用表格中的其他正文

<tbody ng-repeat="data in allData" >
  <tr ng-if="allData && allData.length > 0">
      <td>
          <div class="cursor-pointer" ng-click="$parent.rows = !rows">
              <!-- <span class="fa" ng-class="{'fa-caret-down': rows, 'fa-caret-right': !rows}"></span> -->
              <p>open</p>
          </div>
      </td>
      <td>{{data.foodName}}</td>
      <td></td>
      <td>{{data.totalCount}}</td>
  </tr>
    <tr ng-repeat="a in data.avaiable" ng-show="rows" ng-if="allData && allData.length > 0">
      <td></td>
      <td></td>
      <td>{{a.foodType}}</td>
      <td>{{a.foodCount}}</td>
  </tr>
  </tbody>

<!-- If there are no data -->
  <tbody ng-if="allData && (allData == null || allData.length == 0)">
       <tr>
           <td colspan="3"><span translate="generic.NO_DATA_FOUND">NO DATA FOUND</span></td>
       </tr>
  </tbody>

Answer 2

根据您的要求，如果您只是替换代码

带有ng-click="rows = !rows"

的

ng-click="data.rows = !data.rows"

和

带有ng-show="rows"

的

ng-show="data.rows"

必须有效

Answer 3

它不起作用的原因是 ng-if 创建了一个新的子范围，从而打破了原型范围继承。

必须阅读才能更好地理解问题：

作为一个好的经验法则，请始终使用controller as语法。 Here这就是你应该使用它的原因。

快速修复，您将从另一个对象访问rows属性，如下所示：ng-show="container.rows" - 这样您就不会打破原型范围遗产。请参阅工作示例here。

Answer 4

如果您需要检查allData中是否有数据并且基于allData想要使用ng-repeat，请在同一元素中使用ng-if条件

<tbody ng-if="allData && allData.length > 0" ng-repeat="data in allData" >

而不是嵌套元素<tr ng-if="allData && allData.length > 0">

最好在data.rows中使用rows代替ng-click进行设置，并在ng-show中显示特定数据行。例如：ng-click="data.rows = !data.rows"和ng-show="data.rows"

总解决方案可以是：

<table>
      <thead>
        <tr></tr>
      </thead>
    <tbody ng-if="allData && allData.length > 0" ng-repeat="data in allData" >
          <tr >
              <td>
                  <div class="cursor-pointer" ng-click="data.rows = !data.rows">
                      <p>open</p>
                  </div>
              </td>
              <td>{{data.foodName}}</td>
              .....
          </tr>
            <tr ng-repeat="a in data.avaiable" ng-show="data.rows" ng-if="data.avaiable && data.avaiable.length > 0">
              ....
              <td>{{a.foodCount}}</td>
          </tr>
      </tbody>
      <tbody ng-if="!allData || allData.length == 0">
        <tr class="yourClass">
          <td colspan="3">
             <span translate="generic.NO_DATA_FOUND"></span> 
          </td>
        </tr>
      </tbody>
</table>

如果我添加ng-if，Angular ng-show不起作用

4 个答案: