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>
3
  • Do you have some code to show us? What have you tried so far?
    – tpsilva
    Aug 1, 2016 at 14:29
  • please mention what you have tried
    – Harshil
    Aug 1, 2016 at 14:29
  • i can't figure out chaning ng-hide value. Also, found that ng-if was faster so i was trying for ng-if
    – matrixguy
    Aug 1, 2016 at 14:33

3 Answers 3

2

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
  }];
});
0

I wouldn't use ng-if or ng-show/ng-hide for this. I'd use a filter in your in your ng-repeat expression to filter the array values.

filter UI

`<input type="checkbox" ng-model="filterObj.Failed">`

table

`ng-repeat="t in table | filter:filterObj"`

Something along those lines. Your boolean property keys are a little confusing to me but basically the filterObj keys should match with keys found on your table objects.

codepen - http://codepen.io/pen?template=zrGjgW

0

Instead of doing a ng-hide on each <td>, do it on tr level. Also, bind to a ng-model with your checkbox, to be able to use it:

<tr>
    <td>
        <span class="CheckBox">
            <input type="checkbox" 
                   ng-model="showNoFailures">Show Students with No Failures
        </span>
    </td>
</tr>
<tr ng-repeat="t in table"
    ng-if="t.Failed === 0 || showNoFailures">
    <!-- show if all passed, or the cb is checked -->
    <td colspan="1">{{t.id}}</td>
    <td colspan="1">{{t.Total}}</td>
    <td colspan="1">{{t.Passed}}</td>
    <td colspan="1">{{t.Failed}}</td>
</tr>

See this working jsfiddle

1
  • it should show all with failed=0 when checkbox selected otherwise table should show all the rows. And thanks, i understand how to use ng-if now.
    – matrixguy
    Aug 1, 2016 at 15:07

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.