ng-wenn zu verstecken/show Zeile, wenn der Wert = 0

Question

Die Tabelle Spalten - ID, Bestanden, Fehlgeschlagen, und es gibt eine Checkbox -show Studenten ohne Ausfälle

ich nicht herausfinden kann, wie Winkel verwenden ng-if, um das Kontrollkästchen an die Tabelle zu binden. Wenn der Benutzer also das Kontrollkästchen aktiviert, sollten alle Zeilen sonst nur Schüler ohne Fehler angezeigt werden. Ich bin neu bei 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

Added eine Umsetzung dessen, was Sie versuchen zu erreichen.

Verwendung eines ng-repeat in Kombination mit einem filter.

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

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 2

würde ich nicht ng-if oder ng-show/ng-hide für diese. Ich würde einen Filter in Ihrem ng-repeat Ausdruck verwenden, um die Array-Werte zu filtern.

Filter UI

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

Tisch

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

etwas in diese Richtung. Ihre booleschen Eigenschaftsschlüssel sind für mich ein wenig verwirrend, aber im Grunde sollten die Schlüssel filterObj mit Schlüsseln übereinstimmen, die auf Ihren Tabellenobjekten gefunden werden.

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

Answer 3

Statt tun ein ng-hide auf jeder <td>, tun es auf tr Ebene. Außerdem bindet an ein ng-model mit Checkbox, in der Lage sein, es zu benutzen:

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