复选框取消选中本身应用angularjs过滤后 [英] checkbox unchecking itself after angularjs filter applied

问题描述

此导致要添加到数组相同的项目 - 其用于查询 - 潜在的两倍。当模式被关闭并再次打开，不使用过滤，一切都很好（这是因为我的情态动词是简单的HTML中，我只是NG-隐藏他们的点击）。当它已经被添加，但其复选标记已丢失，由于过滤项目，再次检查两个相同的项目加入。当它被选中都被删除，除非是在数组中的最后一个项目，这不能被删除（我知道这是我的马虎逻辑）。下面是相关的HTML和JavaScript code（著名的最后一句话）。

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>

模态控制器：

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（相关方法）：

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

有当DataService的方法调用我的主控制器其他实例，但这些仅用于数组的长度。因此，如果该复选框问题解决一切就解决了。

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.

推荐答案

终于有了答案 - 数组抱着我的价值观 entityArray 需要更改到一个数组控股JSON值，并为每个值 VAL 必须有一个值检查，这是重新通过<$ psented $ p code> NG-模型 - 在上述情况下将它传递给 getEntityFromModal（实体，entity.checked）

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

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

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

这篇关于复选框取消选中本身应用angularjs过滤后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！