仅在满足某些条件的情况下如何在AngularJs中显示表格行

时间:2019-07-26 17:09:03

标签: html angularjs angularjs-directive

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

我尝试过:

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

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

<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>

请注意,filter.case标签下的<tr>才能从列表中搜索个案。我想以某种方式在基于InspectionStage的位置添加条件,使得如果inspectionStage为0,则仅该行应显示该数据。

1 个答案:

答案 0 :(得分:0)

要获得预期结果,请使用以下选项,将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