Question

我在复选框列表的形式下列出GET请求中的区域列表（我正在使用ng-repeat），所有选中的je复选框都保存在对象中JSON中的数组进入localStorage。但我找不到预先检查用户之前检查过的复选框的方法。我尝试使用indexOf或者包含但是它不起作用

如果你可以帮助我，那就有代码。该应用程序基于 Ionic Cordova v1 ：

查看循环

<li ng-repeat="region in regionFilteredList = (regionList | filter:{name : search}) track by region.id">
    <ion-checkbox class="item-checkbox-right" ng-model="selected" ng-checked="selectAll" ng-click="toggleSelection(region)">
        {{ region.name }}
    </ion-checkbox>
</li>

控制器

APP.controller('SettingsRegionController', function($rootScope, $scope, $http){

    // Regions already selected
    $scope.selectedRegions = JSON.parse(localStorage.getItem('userSubscribedRegions'));

    // GET request
    $http.get( 'http://unsasj-v2.originis.fr/wp-json/wp/v2/region?per_page=100').then(
        // Sucess
        function(response){
            $scope.regionList = response.data;
        },

        // En cas d'erreur
        function(error){
            console.log(error);
        }
    );

});

Attemps

$scope.selectedRegions.indexOf($scope.regionList[0]); // return -1

$scope.selectedRegions.includes($scope.regionList[0]); // return false

$scope.checkTest = function(valueToFind, arrayToSearch){
    for(var i = 0; i < arrayToSearch.length; i++){
        if(arrayToSearch[i] == valueToFind.id){
            return true;
        }
    }
};

JSON数据

$scope.selectedRegions = [{"id":121,"name":"Alsace-Lorraine","slug":"alsace-lorraine","$$hashKey":"object:48"},{"id":122,"name":"Aquitaine","slug":"aquitaine","$$hashKey":"object:49"},{"id":123,"name":"Corse","slug":"corse","$$hashKey":"object:52"},{"id":125,"name":"DOM-TOM","slug":"dom-tom","$$hashKey":"object:53"},{"id":122,"name":"Aquitaine","slug":"aquitaine","$$hashKey":"object:57"}];

$scope.regionList = [{"id":121,"name":"Alsace-Lorraine","slug":"alsace-lorraine"},{"id":122,"name":"Aquitaine","slug":"aquitaine"},{"id":120,"name":"Centre-Limousin","slug":"centre-limousin"},{"id":124,"name":"Champagne - Bourgogne - Franche-Comté","slug":"champagne-bourgogne-franche-comte"},{"id":123,"name":"Corse","slug":"corse"},{"id":125,"name":"DOM-TOM","slug":"dom-tom"},{"id":126,"name":"Ile-de-France","slug":"ile-de-france"},{"id":127,"name":"Languedoc-Rousillon - Midi-Pyrénées","slug":"languedoc-rousillon-midi-pyrenees"},{"id":128,"name":"Nord","slug":"nord"},{"id":129,"name":"Ouest","slug":"ouest"},{"id":130,"name":"PACA","slug":"paca"},{"id":131,"name":"Poitou-Charentes - Pays de la Loire","slug":"poitou-charentes-pays-de-la-loire"},{"id":132,"name":"Rhône-Alpes - Auvergne","slug":"rhone-alpes-auvergne"}]

Answer 1

在对toggleSelectAll函数进行快速编辑后，Protozoid给出的答案对我有用。对于那些可以提供帮助的人来说，有解决方案：

在视图中我在ng-change指令上添加了一个参数，以获取复选框的当前状态（如果已选中或未选中）在toggleSelectAll被解雇的那一刻：

<ion-checkbox class="item-checkbox-right item-divider" ng-model="selectAll" ng-change="toggleSelectAll(selectAll)">
    Select all
</ion-checkbox>

在控制器中

$scope.toggleSelectAll = function (isChecked) {
    if($scope.regionList){
        $scope.regionList.forEach(function (region) {
            region.selected = isChecked;
        });
    }
}

希望它可以提供帮助

Answer 2

我认为问题在于(\\S+)实际上并未指向每个区域的任何内容。 AngularJS解释的方式是ng-model="selected"上的selected属性......但事实并非如此。

相反，您应该为每个区域设置$scope属性，以便您可以选中/取消选中各个区域，如下所示：

selected

在HTML APP.controller('SettingsRegionController', function($rootScope, $scope, $http){ // Regions already selected $scope.selectedRegions = JSON.parse(localStorage.getItem('userSubscribedRegions')); // GET request $http.get( 'http://unsasj-v2.originis.fr/wp-json/wp/v2/region?per_page=100').then( // Sucess function(response){ $scope.regionList = response.data; $scope.regionList.forEach(function (region) { region.selected = false; $scope.selectedRegions.forEach(function (selectedRegion) { if (selectedRegion.id == region.id) { region.selected = true; } }); }); }, // En cas d'erreur function(error){ console.log(error); } ); });中，如此：

ng-model="region.selected"

注意：

删除了<li ng-repeat="region in regionFilteredList = (regionList | filter:{name : search}) track by region.id"> <ion-checkbox class="item-checkbox-right" ng-model="region.selected"> {{ region.name }} </ion-checkbox> </li>，因为ng / model处理了true / false之间的切换。如果您想要该事件的额外功能，请使用ng-click="toggleSelection(region)"。 Docs here

已移除ng-change。如果你想要selectAll功能，你应该实现一个主复选框，并在复选框改变时为所有区域设置为true

e.g。一个非常简单的实现：

在HTML中：

ng-checked="selectAll"

在你的控制器中：

<ion-checkbox class="item-checkbox-right" ng-model="selectAll" ng-change="toggleSelectAll()">
    Select all
</ion-checkbox>

检查对象是否在ng-repeat中的另一个对象数组中

2 个答案: