How to display a table row in AngularJs only if it satisfies some condition

Question

I am getting list of cases from backend and I want to display some cases based on the a few conditions such that each case's inspectionStage field and numeric values. I want to only display cases in the row which have inspectionStage=0.

I have tried:

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

But it is not working, I have also tried with ng-show under <tr> tag but it did not work. Here is my code 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>

Kindly note- filter.case under <tr> tag is required to search the cases from list. I want to add a condition somewhere based on inspectionStage in such a way that if the inspectionStage is 0 then only that row should display that data.

The double curly brackets `{{ }}` inside the `ng-if` convert the boolean `false` to the string `"false"` which is truthy in JavaScript. — georgeawg, Jul 26 '19 at 18:06

score 0 · Answer 1 · answered Jul 26 '19 at 17:17

To achieve expected result, use below option of using ng-if with condition qcCase.inspectionStage==0 instead of inspectionStage==0

working code sample for reference

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

How to display a table row in AngularJs only if it satisfies some condition

1 Answers1