Question

这会导致相同的项目添加到数组 - 用于查询 - 可能两次。当模态关闭并再次打开并且不使用过滤时，一切都很好（这是因为我的模态只是在HTML中，我只是在点击时隐藏它们）。当已经添加的项目，但其检查标记因过滤而丢失时，再次检查两个相同的项目。取消选中它们时都会被删除，除非它是数组中的最后一项，否则无法删除（我知道这是我的slapdash逻辑）。以下是相关的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);
     };

}]);

shareDataService（相关方法）：

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

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

Answer 1

<body>未在您的javascript中的任何位置声明，因此每次过滤时，entityChecked都会重置，因此您需要使模型成为转发器将看到并有权访问的内容。

entityChecked

Answer 2

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

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

应用angularjs过滤器后复选框取消选中

2 个答案: