Question

我有一个表格显示总计，通过和失败的案例，上面有一个复选框，表示显示没有失败的行。我似乎无法在不改变很多事情的情况下使其工作（我很复杂）..

    <input type="checkbox" id="zerofailures" ng-model="showNoFailures"><label for="zerofailures">Show Features with No Failures</label> 

                        <table>
                          <tr  ng-repeat="f in feature">

                            <td colspan="1">{{f.Total}}</td>
                            <td colspan="1">{{f.Passed}}</td>
                            <td colspan="1">{{f.Failed}}</td>                                                                               
                          </tr>

                        </table>

这有一个简单的方法吗？

Answer 1

这就是你要找的东西。您需要conditional filter，以便在选中checkbox时过滤您的结果。

在html中过滤使用情况

  <tr ng-repeat="f in feature |filter: (showNoFailures ? failureFilter:'')">

控制器中的过滤器定义

$scope.failureFilter = function(item) {
  return item.failed === 0;
};

请查看下面的代码段以获取工作示例

＆＃13;

angular.module('Demo', []).controller('SampleController', function($scope) {
  $scope.feature = [{
    total: 10,
    passed: 5,
    failed: 5
  }, {
    total: 12,
    passed: 12,
    failed: 0
  }, {
    total: 15,
    passed: 15,
    failed: 0
  }];

  $scope.failureFilter = function(item) {
    return item.failed === 0;
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="Demo">
  <div ng-controller="SampleController">
    <input type="checkbox" id="zerofailures" ng-model="showNoFailures">
    <label for="zerofailures">Show Features with No Failures</label>

    <table>
      <tr ng-repeat="f in feature |filter: (showNoFailures?failureFilter:'')">

        <td colspan="1">Total: {{f.total}}</td>
        <td colspan="1">Pass: {{f.passed}}</td>
        <td colspan="1">Fail: {{f.failed}}</td>
      </tr>

    </table>
  </div>
</body>

＆＃13;

Answer 2

您可以尝试以下解决方案。

<input type="checkbox" id="zerofailures" ng-model="showNoFailures"><label for="zerofailures">Show Features with No Failures</label> 

                        <table>
                          <tr  ng-repeat="f in feature">

                            <td colspan="1">{{f.Total}}</td>
                            <td colspan="1">{{f.Passed}}</td>
                            <td colspan="1"  ng-show="showNoFailures && f.failed===0">{{f.Failed}}</td>                                                                               
                          </tr>

                        </table>

它会根据复选框选中/取消选中显示/隐藏行。

选中复选框时隐藏/显示行

2 个答案: