Javascript 在列表中搜索时出现角度过滤器问题
我使用角度过滤器来搜索列表。使用筛选器进行搜索工作正常，但问题也随之而来。我还有一个复选框“全选”此复选框的操作正常，但当我搜索列表时，如果我只从六个元素中获取两个元素，然后选中“选择框”，则行中的其他四个元素也会被选中。我想避免这种情况。我的代码如下： Html 指令： 此指令用于选择复选框Javascript 在列表中搜索时出现角度过滤器问题,javascript,angularjs,Javascript,Angularjs,我使用角度过滤器来搜索列表。使用筛选器进行搜索工作正常，但问题也随之而来。我还有一个复选框“全选”此复选框的操作正常，但当我搜索列表时，如果我只从六个元素中获取两个元素，然后选中“选择框”，则行中的其他四个元素也会被选中。我想避免这种情况。我的代码如下： Html 指令： 此指令用于选择复选框 directive('selectAllCheckbox', function () { return {
directive('selectAllCheckbox', function () {
return {
replace: true,
restrict: 'E',
scope: {
checkboxes: '=',
allselected: '=allSelected',
allclear: '=allClear',
multiple: '=multiple',
ids: '=ids'
},
template: '<input type="checkbox" class="input-checkbox" ng-model="master" ng-change="masterChange()">',
controller: function ($scope, $element) {
$scope.masterChange = function () {
if ($scope.master) {
angular.forEach($scope.checkboxes, function (cb, index) {
cb.isSelected = true;
});
} else {
angular.forEach($scope.checkboxes, function (cb, index) {
cb.isSelected = false;
});
}
};
$scope.$watch('checkboxes', function (newVal,oldVal) {
if(newVal !== oldVal){
var allSet = true,allClear = true,countSelected = 0;
$scope.ids = [];
angular.forEach($scope.checkboxes, function (cb, index) {
if(cb.isSelected){
countSelected ++;
$scope.ids.push(cb.id);
}
if (cb.isSelected) {
allClear = false;
} else {
allSet = false;
}
});
if(countSelected > 1){
$scope.multiple = true
}else{
$scope.multiple = false
}
if ($scope.allselected !== undefined) {
$scope.allselected = allSet;
}
if ($scope.allclear !== undefined) {
$scope.allclear = allClear;
}
$element.prop('indeterminate', false);
if (allSet) {
$scope.master = true;
} else if (allClear) {
$scope.master = false;
} else {
$scope.master = false;
$element.prop('indeterminate', true);
}
}
}, true);
}
};
});
希望你能理解我的问题。有人能帮我吗。我会用控制器过滤控制器中的列表： HTML: JS:
您可以尝试观察搜索输入更改，将当前可用列表标记为全选，而不是迭代整个列表。我使用以下代码获得了部分解决方案：item in datalist=myList | filter:name。这有助于我在搜索框中键入时更改列表的大小。但我希望，如果按下“全选”按钮，那么我只希望选择四行，而不是所有行。我还使用了$watchCollection，而不是$watch$watch将监视数组的引用，而$watchCollection将监视其内容。
directive('selectAllCheckbox', function () {
return {
replace: true,
restrict: 'E',
scope: {
checkboxes: '=',
allselected: '=allSelected',
allclear: '=allClear',
multiple: '=multiple',
ids: '=ids'
},
template: '<input type="checkbox" class="input-checkbox" ng-model="master" ng-change="masterChange()">',
controller: function ($scope, $element) {
$scope.masterChange = function () {
if ($scope.master) {
angular.forEach($scope.checkboxes, function (cb, index) {
cb.isSelected = true;
});
} else {
angular.forEach($scope.checkboxes, function (cb, index) {
cb.isSelected = false;
});
}
};
$scope.$watch('checkboxes', function (newVal,oldVal) {
if(newVal !== oldVal){
var allSet = true,allClear = true,countSelected = 0;
$scope.ids = [];
angular.forEach($scope.checkboxes, function (cb, index) {
if(cb.isSelected){
countSelected ++;
$scope.ids.push(cb.id);
}
if (cb.isSelected) {
allClear = false;
} else {
allSet = false;
}
});
if(countSelected > 1){
$scope.multiple = true
}else{
$scope.multiple = false
}
if ($scope.allselected !== undefined) {
$scope.allselected = allSet;
}
if ($scope.allclear !== undefined) {
$scope.allclear = allClear;
}
$element.prop('indeterminate', false);
if (allSet) {
$scope.master = true;
} else if (allClear) {
$scope.master = false;
} else {
$scope.master = false;
$element.prop('indeterminate', true);
}
}
}, true);
}
};
});
<div ng-controller="exampleCtrl">
<label><select-all-checkbox checkboxes="filteredList" all-selected="allSelectedWtUsers" all-clear="noSelectedWtUsers" multiple="multipleWtUsers" ids="selectedWUsersIds"></select-all-checkbox>select all</label>
<br>
<input type='text' ng-model="name" placeholder="search"/>
<br>
Filtered:
<div class="col-sm-12" ng-repeat="allowedUser in filteredList">
<input type="checkbox" ng-model="allowedUser.isSelected"> {{allowedUser.firstName}} {{allowedUser.lastName}}
</div>
<br>
All:
<div class="col-sm-12" ng-repeat="allowedUser in editResource.allowedUsersList">
<input type="checkbox" ng-model="allowedUser.isSelected"> {{allowedUser.firstName}} {{allowedUser.lastName}}
</div>
</div>
angular.module('exampleApp', [])
.controller('exampleCtrl', function ($scope) {
$scope.editResource = {
allowedUsersList: [
{firstName: 'Joe', lastName: 'Smith', isSelected: false},
{firstName: 'John', lastName: 'Parker', isSelected: false},
{firstName: 'Jim', lastName: 'Smith', isSelected: false}
]
};
$scope.$watch('name', function () {
$scope.filteredList = $scope.$eval('editResource.allowedUsersList | filter:{firstName:name}');
})
})
.directive('selectAllCheckbox', function () {
return {
replace: true,
restrict: 'E',
scope: {
checkboxes: '=',
allselected: '=allSelected',
allclear: '=allClear',
multiple: '=multiple',
ids: '=ids'
},
template: '<input type="checkbox" class="input-checkbox" ng-model="master" ng-change="masterChange()">',
controller: function ($scope, $element) {
$scope.masterChange = function () {
if ($scope.master) {
angular.forEach($scope.checkboxes, function (cb, index) {
cb.isSelected = true;
});
} else {
angular.forEach($scope.checkboxes, function (cb, index) {
cb.isSelected = false;
});
}
};
$scope.$watchCollection('checkboxes', function (newVal,oldVal) {
if(newVal !== oldVal){
var allSet = true,allClear = true,countSelected = 0;
$scope.ids = [];
angular.forEach($scope.checkboxes, function (cb, index) {
if(cb.isSelected){
countSelected ++;
$scope.ids.push(cb.id);
}
if (cb.isSelected) {
allClear = false;
} else {
allSet = false;
}
});
if(countSelected > 1){
$scope.multiple = true
}else{
$scope.multiple = false
}
if ($scope.allselected !== undefined) {
$scope.allselected = allSet;
}
if ($scope.allclear !== undefined) {
$scope.allclear = allClear;
}
$element.prop('indeterminate', false);
if (allSet) {
$scope.master = true;
} else if (allClear) {
$scope.master = false;
} else {
$scope.master = false;
$element.prop('indeterminate', true);
}
}
}, true);
}
};
});
angular.bootstrap(document, ['exampleApp']);