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

我有一个表格，显示了总的、通过的和失败的案例，上面有一个复选框，上面写着“显示没有失败的行”。如果不改变很多事情，我似乎无法让它工作（我已经够复杂了）

显示无故障的功能
{{f.Total}}
{{f.Passed}}
{{f.Failed}}

---

有没有一个简单的方法

这就是你要找的。您需要一个

条件过滤器

，当选中

复选框时，它将过滤您的结果

html中的过滤器用法

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

请检查下面的代码片段以了解工作示例


angular.module（'Demo'，[]）.controller（'SampleController'，function（$scope）{
$scope.feature=[{
总数：10，
通过日期:5,，
失败：5
}, {
总数：12，
通过日期:12,，
失败：0
}, {
总数：15，
通过日期:15,，
失败：0
}];
$scope.failureFilter=功能（项）{
返回项目。失败===0；
};
});

显示无故障的功能
总计：{f.Total}
通过：{f.passed}
失败：{{f.failed}
您可以尝试以下解决方案

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

显示无故障的功能
{{f.Total}}
{{f.Passed}}
{{f.Failed}}

它将根据选中/未选中的复选框显示/隐藏该行。
选中复选框时是否隐藏该表而不是整个表，仅隐藏失败=0的条目；
$scope.failureFilter = function(item) {
  return item.failed === 0;
};

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