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

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 更改为：

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 创建了一个新的子作用域，从而破坏了原型作用域继承。

必须阅读以更好地理解这个问题：

• Angularjs ng-model doesn't work inside ng-if。
• What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

根据经验，始终使用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">

最好在ng-click 中使用data.rows 而不是rows 来设置和在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>