时间戳

首页 > 解决方案 > 仅当满足某些条件时，如何在AngularJs中显示表格行

html - 仅当满足某些条件时，如何在AngularJs中显示表格行

问题描述

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

我努力了：

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

但它不起作用，我也尝试过使用ng-showunder<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，那么只有该行应该显示该数据。

标签： htmlangularjsangularjs-directive

解决方案

为了达到预期的结果，请使用以下选项，使用带有条件的 ng-ifqcCase.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

推荐阅读