I have some script in controller which would bind a selection of checkbox and let me select all the checkboxes (Around 1000).. Unfortunately the rendering of selections is significantly slower in Chrome compared to firefox and safari which are doing fine. The Javascript I wrote is fine as logging the time between start and end of the calls give me a gap of just a few millisecs.
So if you notice in the script below, I'm populating and making the data available for field.selectedFilters. As mentioned earlier, the JS execution is fine and it all boils down to the rendering that browser is doing. I have read multiple posts but none of them address with the binding involved. Most of them talk about accessing DOM directly. Any thoughts would be appreciated
HTML
<label>
<input type="checkbox"
checklist-model="field.selectedFilters"
checklist-value="data">
{{::data.label}}
</label>
<div class="selectAllCheckBox" ng-controller="checkBoxController">
<b>
<input type="checkbox" data-ng-click="checkAll(scopeValue(field.id))"
ng-model="selectedAll"/>
Check All
</b>
</div>
JAVASCRIPT
app.controller("checkBoxController", function ($scope) {
$scope.checkAll = function (items) {
$scope.field.selectedFilters=[]; // Initializing the scope variable
$scope.Items = items;
if ($scope.selectedAll) {
$scope.selectedAll= true;
$scope.field.selectedFilters = angular.copy($scope.Items);
}
else {
$scope.selectedAll = false;
$scope.field.selectedFilters = [];
// Unchecking would empty the above scope variable
}
};
});
Aucun commentaire:
Enregistrer un commentaire