- 首页
- 前端开发
- 应用angularjs过滤器后复选框取消选中
应用angularjs过滤器后复选框取消选中
[英] checkbox unchecking itself after angularjs filter applied
本文介绍了应用angularjs过滤器后复选框取消选中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这会导致相同的项目被添加到数组中 - 用于查询 - 可能两次.当模态关闭并再次打开并且没有使用过滤时，一切都很好(这是因为我的模态只是在 HTML 中，我只是在点击时隐藏它们).当一个已经添加的项目，但它的复选标记由于过滤而丢失时，再次检查添加了两个相同的项目.当它被取消选中时，两者都会被删除，除非它是数组中的最后一项，否则无法删除(我知道这是我的草率逻辑).下面是相关的 HTML 和 JavaScript 代码(著名的遗言).
HTML:
<button ng-click="showModal = !showModal">实体</button><div ng-init="showModal=false"><div class="modal淡入" aria-hidden="false"样式=显示:块；"ng-show="showModal"><div class="modal-dialog"><div class="modal-content"><strong>实体</strong><div><div><input type="text" placeholder="Search" ng-model="simpleFilter"><button type="button" ng-click="showModal=false">好的</button>
<br><div ng-repeat="entityArray 中的实体 | filter:simpleFilter"><标签><输入样式=显示:内联块；边距顶部:5px"type="checkbox" ng-model="entityChecked"ng-change="getEntityFromModal(entity, entityChecked)"/><a>{{entity}}</a>
模态控制器:
angular.module("app").controller("modalCtrl", ["$scope", "shareDataService", "getDataService", function ($scope, shareDataService, ngDialog, getDataService) {$scope.entityArray = shareDataService.getEntityArray();$scope.depotArray = shareDataService.getDepotArray();$scope.getEntityFromModal = 函数(实体，已检查){shareDataService.setModalEntity(实体，检查)；};$scope.getDepotFromModal = 函数(仓库，检查){shareDataService.setModalDepot(depot,checked);};}]);
shareDataService(相关方法):
angular.module("app").factory("shareDataService", function () {var entityArrayService = [];var depotArrayService = [];var modalEntity = [];var modalDepot = [];getEntityArray: 函数 () {返回 entityArrayService;},getDepotArray: 函数 () {返回 depotArrayService;},setModalEntity:函数(实体，已检查){如果(！检查){for (var i = 0; i < modal Entity.length; i++) {如果(modalEntity[i] === 实体){modalEntity.splice(i, 1);}}} 别的 {modalEntity.push(entity);}},setModalDepot:功能(仓库，检查){如果(！检查){for (var i = 0; i < modalDepot.length; i++) {如果(modalDepot[i] === 仓库){modalDepot.splice(i, 1);}}} 别的 {modalDepot.push(depot);}},});
在我的主控制器中调用 dataservice 方法时还有其他实例，但这些仅用于数组的长度.所以如果复选框问题解决了，一切都解决了.
解决方案
终于有了答案——保存我的值的数组 entityArray 需要改为保存 JSON 值的数组，并且对于每个值val 必须有一个值 checked ，它由 ng-model 表示 - 在上面的例子中它会被传递给 getEntityFromModal(entity, entity.checked).
工作 plnk - https://plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview
This causes the same item to be added to the array - which is used for querying - potentially twice. When the modal is closed and opened again and filtering is not used, everything is fine (this is because my modals are simply within the HTML, I just ng-hide them on click). When an item which has already been added, but its checkmark has been lost due to filtering, is checked again two of the same items are added. When it is unchecked both are removed, unless it is the last item in the array, this cannot be removed (I'm aware this is my slapdash logic). Below is the relevant HTML and JavaScript code (famous last words).
HTML:
<div style="display: inline-block;" ng-controller="modalCtrl">
<button ng-click="showModal = !showModal">Entities</button>
<div ng-init="showModal=false">
<div class="modal fade in" aria-hidden="false"
style="display: block;" ng-show="showModal">
<div class="modal-dialog">
<div class="modal-content">
<strong>ENTITIES</strong>
<div>
<div>
<input type="text" placeholder="Search" ng-model="simpleFilter">
<button type="button" ng-click="showModal=false">Ok</button>
</div>
</div>
<br>
<div ng-repeat="entity in entityArray | filter:simpleFilter">
<label> <input
style="display: inline-block; margin-top: 5px"
type="checkbox" ng-model="entityChecked"
ng-change="getEntityFromModal(entity, entityChecked)" /> <a>{{entity}}</a>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
Modal Controller:
angular.module("app").controller("modalCtrl", ["$scope", "shareDataService", "getDataService", function ($scope, shareDataService, ngDialog, getDataService) {
$scope.entityArray = shareDataService.getEntityArray();
$scope.depotArray = shareDataService.getDepotArray();
$scope.getEntityFromModal = function (entity, checked) {
shareDataService.setModalEntity(entity, checked);
};
$scope.getDepotFromModal = function (depot, checked) {
shareDataService.setModalDepot(depot, checked);
};
}]);
shareDataService (relevant methods):
angular.module("app").factory("shareDataService", function () {
var entityArrayService = [];
var depotArrayService = [];
var modalEntity = [];
var modalDepot = [];
getEntityArray: function () {
return entityArrayService;
},
getDepotArray: function () {
return depotArrayService;
},
setModalEntity: function (entity, checked) {
if (!checked) {
for (var i = 0; i < modalEntity.length; i++) {
if (modalEntity[i] === entity) {
modalEntity.splice(i, 1);
}
}
} else {
modalEntity.push(entity);
}
},
setModalDepot: function (depot, checked) {
if (!checked) {
for (var i = 0; i < modalDepot.length; i++) {
if (modalDepot[i] === depot) {
modalDepot.splice(i, 1);
}
}
} else {
modalDepot.push(depot);
}
},
});
There are other instances when the dataservice methods are called in my main controller, but these are only used for the array's length. So if the checkbox problem is solved everything is solved.
解决方案
Finally have an answer - the array holding my values entityArray needs to be changed into an array holding JSON values, and for each value val there must be a value checked , which is represented by ng-model - in the above case it would be passed to getEntityFromModal(entity, entity.checked).
working plnk - https://plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview
这篇关于应用angularjs过滤器后复选框取消选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
