Я использую Smart Table для представления сетки. Я использую эту директиву Select All Row для своих целей. Он отлично работает в данном плункере. Но в моем проекте есть некоторые проблемы. Когда я впервые нажимаю флажок «Выбрать все», он выбирает все строки. Затем я могу отменить выбор всех, снова нажав на флажок «Выбрать все». Но после этого, когда я пытаюсь выбрать все строки с помощью этого флажка, я не могу выбрать. В чем проблема? Я проверил $scope.selected, я содержит выбранные строки oid. Но почему в поле зрения я не могу проверить?
Моя директива "Выбрать все"
'use strict';
define(['app'], function (app) {
var rowSelectAllDirective = function () {
return {
require: '^stTable',
template: '<input type="checkbox">',
scope: {
all: '=rowSelectAll',
selected: '='
},
link: function (scope, element, attr) {
scope.isAllSelected = false;
element.bind('click', function (evt) {
scope.$apply(function () {
scope.all.forEach(function (val) {
val.isSelected = scope.isAllSelected;
});
});
});
scope.$watchCollection('selected', function(newVal) {
var s = newVal.length;
var a = scope.all.length;
if ((s == a) && s > 0 && a > 0) {
element.find('input').attr('checked', true);
scope.isAllSelected = false;
} else {
element.find('input').attr('checked', false);
scope.isAllSelected = true;
}
});
}
}
};
app.directive('rowSelectAll', [rowSelectAllDirective]);
});
Выберите однострочную директиву,
'use strict';
define(['app'], function (app) {
var rowSelectDirective = function () {
return {
require: '^stTable',
template: '<input type="checkbox" id="chk"><label for="chk">',
scope: {
row: '=rowSelect'
},
link: function (scope, element, attr, ctrl) {
element.bind('click', function (evt) {
scope.$apply(function () {
ctrl.select(scope.row, 'multiple');
});
});
scope.$watch('row.isSelected', function (newValue) {
if (newValue === true) {
element.parent().addClass('st-selected');
element.find('input').attr('checked', true);
} else {
element.parent().removeClass('st-selected');
element.find('input').attr('checked', false);
}
});
}
}
};
app.directive('rowSelect', [rowSelectDirective]);
});
В моем контроллере:
$scope.selectAll = function (collection) {
// if there are no items in the 'selected' array,
// push all elements to 'selected'
if ( $scope.selected.length === 0) {
angular.forEach(collection, function(val) {
$scope.selected.push(val.oid);
});
// if there are items in the 'selected' array,
// add only those that ar not
} else if ( $scope.selected.length > 0 && $scope.selected.length != $scope.displayedCollection.length) {
angular.forEach(collection, function(val) {
var found = $scope.selected.indexOf(val.oid);
if(found == -1) $scope.selected.push(val.oid);
});
// Otherwise, remove all items
} else {
$scope.selected = [];
}
};
$scope.select = function(oid) {
var found = $scope.selected.indexOf(oid);
if(found == -1) $scope.selected.push(oid);
else $scope.selected.splice(found, 1);
};
HTML:
<table st-table="displayedCollection" class="table table-striped smartTableFont" st-safe-src="rowCollection">
<thead>
<tr>
<th row-select-all="displayedCollection" selected="selected" ng-click="selectAll(displayedCollection)"></th>
<th st-sort="partnerName" class="text-left">Partner Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedCollection | limitTo : itemsByPage" >
<td row-select="row" ng-click="select(row.oid)" ></td>
<td class="text-left" width="25%">{{row.partnerName}}</td>
</tr>
</tbody>
</table>
