当值 =0 时，ng-if 到 hide/show 行

Question

table 有列 - ID、PASSED、FAILED，还有一个复选框 - 显示没有 FAILURES 的学生

我不知道如何使用 angular ng-if 将复选框与 table 绑定。因此，如果用户选中复选框，它应该显示所有其他行，只有没有失败的学生。我是 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>

Answer 1

我不会为此使用 ng-if 或 ng-show/ng-hide。我会在你的 ng-repeat 表达式中使用过滤器来过滤数组值。

过滤器UI

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

table

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

类似的东西。你的布尔属性键让我有点困惑，但基本上 filterObj 键应该与你的 table 对象上的键匹配。

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

Answer 2

添加了您要实现的目标的实现。

结合使用 ng-repeat 和 filter。

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

控制器

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

Answer 3

与其在每个 <td> 级别上执行 ng-hide，不如在 tr 级别上执行。此外，使用您的复选框绑定到 ng-model，以便能够使用它：

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

见this working jsfiddle

当值 =0 时，ng-if 到 hide/show 行

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

angularjs

angular-ng-if