Search code examples
angularjsangular-ng-if

ng-if to hide/show row when value =0


The table has columns - ID, PASSED, FAILED and there is a checkbox -show students with no FAILURES

I can't figure out how to use angular ng-if to bind the checkbox with the table. So if the user checks the checkbox , it should show all rows else only students with no failures. I'm new to angularJS :|

<tr>
   <td><span class="CheckBox"><input type="checkbox" value="">Show Students with No Failures</span></td>
</tr>
<tbody >
   <!--display none-->
   <tr ng-repeat="t in table">
      <td colspan="1" ng-hide='t.Failed===0'>{{t.id}}</td>
      <td colspan="1" ng-hide='t.Failed===0'>{{t.Total}</td>
      <td colspan="1" ng-hide='t.Failed===0'>{{t.Passed}}</td>
      <td colspan="1" ng-hide='t.Failed===0'>{{t.Failed}}</td>
   </tr>

Solution

  • Added a implementation of what you are trying to accomplish.

    Using a ng-repeatin combination with a filter.

    See JSFIDDLE

    VIEW

    <div id="app" ng-app="myApp" ng-controller="myCtrl">
    
      Only passes students?
      <input type="checkbox" ng-init="passes = true" ng-model="passes">
      <br/> Not passed student students?
      <input type="checkbox" checked ng-init="fails = true" ng-model="fails">
      <br/>
      <br/>
      <table cellspacing="0" cellpadding="0">
        <tbody>
          <tr class="days">
            <th>Student name</th>
            <th>#FAILS</th>
            <th>PASSED?</th>
          </tr>
          <tr ng-repeat="student in studentData | filter: studentFilter">
            <td>{{ student.name }}</td>
            <td>{{ student.fails }}</td>
            <td>
              {{ (student.fails <=0 ) ? 'YES' : 'NO' }} </td>
          </tr>
        </tbody>
      </table>
    
    
    </div>
    

    CONTROLLER

    var app = angular.module('myApp', [])
    
    app.controller('myCtrl', function($scope) {
    
      $scope.studentFilter = function (item) { 
            if($scope.passes && $scope.fails) return item;
          if($scope.passes && item.fails <= 0) return item;
          if($scope.fails && item.fails > 0) return item;
      };
    
    
      $scope.studentData = [{
        id: 1,
        name: 'Nabil',
        fails: 1
      }, {
        id: 2,
        name: 'Daan',
        fails: 0
      }, {
        id: 3,
        name: 'Walter',
        fails: 2
      }, {
        id: 4,
        name: 'Magaly',
        fails: 0
      }, {
        id: 5,
        name: 'Steven',
        fails: 2
      }, {
        id: 6,
        name: 'Bill',
        fails: 0
      }];
    });