NG-如果隱藏/顯示行當值= 0

Question

該表具有列 - ID，通過，失敗和有一個複選框-show學生沒有失敗

我不知道如何使用角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-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 2

我不會爲此使用ng-if或ng-show/ng-hide。我會在您的ng-repeat表達式中使用過濾器來過濾數組值。

濾波器UI

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

表

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

沿這些行的東西。你的布爾屬性鍵對我有點困惑，但基本上filterObj鍵應該與表對象上的鍵匹配。

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

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