javascript - Why isn't the following function selecting all the checkboxes inside this directive? -
the following directive has 2 tabels: 1 checkboxes , without checkboxes. has function selects checkboxes:
.directive('tablelist', function() { return { restrict: 'ea', template: '<button ng-if="listall" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mymodal">' + 'launch demo modal' + '</button>' + '<table class="table table-stripped">' + '<thead>' + '<th>some code</th>' + '</tr>' + '</thead>' + '<tbody>' + '<tr ng-repeat="item in listthis">' + '<th scope="row">{{$index + 1}}</th>' + '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' + '<td>some code</td>' + '</tr>' + '</tbody>' + '</table>' + '<div ng-if="listall" class="" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">' + '<div class="modal-dialog">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button>' + '<h4 class="modal-title">modal title</h4>' + '</div>' + '<div class="modal-body">' + '<table class="table table-stripped list-all">' + '<thead>' + '<tr>' + '<th><input type="checkbox" ng-model="selectedall" ng-click="checkall()" /></th>' + '<th>some code</th>' + '</tr>' + '</thead>' + '<tbody>' + '<tr ng-repeat="item in listall">' + '<th scope="row"><input type="checkbox" value="0" ng-model="item.selected"></th>' + '<td><a href="#/groups/{{item.id}}">{{item.name}}</a></td>' + '<td>some code</td>' + '</tr>' + '</tbody>' + '</table>' + '</div>' + '<div class="modal-footer">' + '<button type="button" class="btn btn-primary">save changes</button>' + '</div>' + '</div><!-- /.modal-content -->' + '</div><!-- /.modal-dialog -->' + '</div><!-- /.modal -->', scope: { listthis: "=", listall: "=", submit: "&" }, controller: function() { }, link: function(scope, elem, attr, ctrl) { scope.checkall = function() { if (scope.selectedall) { scope.selectedall = true } else { scope.selectedall = false } angular.foreach(scope.listall, function (item) { item.selected = scope.selectedall }) } } }; }) the checkboxes work. how looks if check first item:
[ { "id": "1", "name": "user 1", "selected": true }, { "id": "2", "name": "user 2", "selected": false }, { "id": "3", "name": "user 3", "selected": false } ] but when click checkboxe checks items nothing happens:
what problem?
this how i'm using directive:
<table-list list-this="users" list-all="users" submit="submit(event)"> </table-list>
the problem in code:
if (scope.selectedall) { scope.selectedall = true } else { scope.selectedall = false } there no point in statement because scope.selectedall never become true if false , vice versa - never changes value. may meant:
if (scope.selectedall) { scope.selectedall = false } else { scope.selectedall = true }
Comments
Post a Comment