Question

该表有列 - ID，PASSED，FAILED，还有一个复选框 - 显示没有失败的学生

我无法弄清楚如何使用角度ng-if将复选框与表格绑定。因此，如果用户选中该复选框，则应显示所有其他行，仅显示没有失败的学生。我是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表达式中使用过滤器来过滤数组值。

过滤用户界面

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

表格

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

这些方面的东西。你的布尔属性键对我来说有点混乱，但基本上filterObj键应该与表对象上的键匹配。

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

Answer 2

添加了您要完成的内容的实现。

将ng-repeat与filter结合使用。

请参阅JSFIDDLE

查看

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

Answer 3

而不是在每个ng-hide上执行<td>，而是在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

ng-if在值= 0时隐藏/显示行

3 个答案: