仅当满足某些条件时，如何在AngularJs中显示表格行[重复]答案

【问题标题】：How to display a table row in AngularJs only if it satisfies some condition [duplicate]仅当满足某些条件时，如何在AngularJs中显示表格行[重复]
【发布时间】：2019-12-05 01:21:59
【问题描述】：

我正在从后端获取案例列表，我想根据几个条件显示一些案例，例如每个案例的inspectionStage 字段和数值。我只想在有 InspectionStage=0 的行中显示案例。

我试过了：

<tr ng-repeat="qcCase in qcCases | filter: filter.case" ng-if="{{inspectionStage==0}}">

但它不起作用，我也尝试在<tr> 标签下使用ng-show，但它不起作用。这是我的代码：

<div class="panel-body">
  <div class="row">
    <div class="col-md-4">
      <div ng-cloak style="padding-left: 15px; padding-top: 15px; padding-bottom: 5px;">
        <md-input-container class="md-block"> <label>Search Cases</label> <input ng-model="filter.case">
        </md-input-container>
      </div>
    </div>
  </div>
  <md-content>
    <md-tabs md-dynamic-height md-border-bottom>
      <md-tab label="Not Started">
        <md-content class="md-padding">
          <table ng-table="tableParams" class="table table-striped table-bordered table-hover">
            <tr ng-repeat="qcCase in qcCases | filter: filter.case">
              <td data-title="'#'">{{$index + 1}}</td>
              <td data-title="'Case ID'">{{qcCase.id}}</td>
            </tr>
          </table>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

请注意-<tr> 标签下的filter.case 需要从列表中搜索案例。我想根据inspectionStage 在某处添加一个条件，这样如果inspectionStage 为0，那么只有该行应该显示该数据。

【问题讨论】：

ng-if 中的双花括号{{ }} 将布尔值false 转换为字符串"false"，这在JavaScript 中是真实的。

标签： html angularjs angularjs-directive

【解决方案1】：

要达到预期的结果，请使用以下选项使用 ng-if 条件 qcCase.inspectionStage==0 而不是 inspectionStage==0

工作代码示例供参考

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.qcCases  = [{id: 1, inspectionStage: 0},
                      {id: 2, inspectionStage: 1},
                      {id: 3, inspectionStage: 0}]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<table ng-table="tableParams"
            class="table table-striped table-bordered table-hover">
            <tr
                ng-repeat="qcCase in qcCases | filter: filter.case" ng-if="qcCase.inspectionStage==0">
                <td data-title="'#'">{{$index + 1}}</td>
                <td data-title="'Case ID'">{{qcCase.id}}</td>
</tr>
        </table>

</div>


</body>

codepen - https://codepen.io/nagasai/pen/QeGwjg?editors=1010

【讨论】：