复选框在应用 AngularJS 过滤器后取消选中自身

Question

这会导致将同一项目添加到数组中 - 用于查询 - 可能两次。 当模态关闭并再次打开并且不使用过滤时，一切都很好（这是因为我的模态只是在 HTML 中，我只是在单击时 ng 隐藏它们）。 当已添加的项目，但由于过滤而丢失其复选标记时，再次选中两个相同的项目。 当它被取消选中时，两者都被删除，除非它是数组中的最后一个项目，否则无法删除（我知道这是我的草率逻辑）。下面是相关的HTML和JavaScript代码（著名的遗言）。

.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>

模态控制器：

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);
     };
}]);

共享数据服务（相关方法）：

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);
        }
    },
});

在我的主控制器中调用数据服务方法时，还有其他情况，但这些方法仅用于数组的长度。 因此，如果复选框问题得到解决，一切都会解决。

Answer 1

entityChecked 没有在 javascript 中的任何位置声明，因此每次过滤时，实体检查都会重置，因此您需要使模型成为中继器将看到并可以访问的内容。

           <!-- entity is now in the created child scope -->
<div ng-repeat="entity in entityArray | filter:simpleFilter">
    <label> <input style="display: inline-block; margin-top: 5px"
         <!-- set the checked value on the 'entity' itself, then it will be  retained -->
         type="checkbox" ng-model="entity.entityChecked"
         ng-change="getEntityFromModal(entity, entityChecked)" /> <a>{{entity}}</a>
    </label>
</div>

Answer 2

终于有一个答案 - 保存我的值的数组需要更改为保存 JSON 值的数组entityArray，并且对于每个值val必须有一个值checked，它由 ng-model 表示 - 在上述情况下，它将被传递给 getEntityFromModal(entity, entity.checked) .

工作 PLNK - https://plnkr.co/edit/2ptIAdOyaIw8mGqpU7Cp?p=preview