0
Я использую смарт-таблицу для просмотра сетки. Я использую эту директиву Select All Row для заполнения моих целей. Он отлично работает в данном plunker. Но в моем проекте у него есть некоторые проблемы. Когда я сначала нажимаю на кнопку «Выбрать все», он выбирает все строки. Затем я могу отменить выбор всех, снова нажав кнопку «Выбрать все». Но после этого, когда я пытаюсь выбрать все строки, используя этот флажок, я не могу выбрать. В чем проблема? Я проверил $scope.selected, i содержит выбранные строки. Но почему я не могу проверить?Выбрать все Строка не работает должным образом с помощью флажка
Мои Select All Directive
'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]);
});
In My Controller:
$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>
Где мне нужно изменить? –