the table has columns - id, passed, failed , there checkbox -show students no failures
i can't figure out how use angular ng-if bind checkbox table. if user checks checkbox , should show rows else students no failures. i'm new angularjs :|
<tr> <td><span class="checkbox"><input type="checkbox" value="">show students 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>
added implementation of trying accomplish.
using ng-repeat
in combination filter
.
see jsfiddle
view
<div id="app" ng-app="myapp" ng-controller="myctrl"> 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 }]; });
Comments
Post a Comment