Залить/очистить массив, если флажок установлен/снят флажок

В настоящее время я использую карты углового google для создания карты с несколькими различными типами маркеров. Ниже моей карте У меня есть простой набор флажков, как так:Залить/очистить массив, если флажок установлен/снят флажок

<div class="mapOptions"> 
    <form action="" class="form-inline" style="text-align:center"> 
    <label for="">General:</label> 
    <input type="checkbox" checked value="Games"> 
    <label for="" style="color:#000033">Games</label> 
    <input type="checkbox" checked value="Practices"> 
    <label for="" style="color:#ffd900">Practices</label> 
    </form> 
</div>

В рамках моего контроллера я инициализировать пустые массивы затем заполнить их с «маркерами» через вызовы моих API конечных точек:

vm.markersGames = []; 
vm.markersPractices = [];

Я вы хотите очистить каждый соответствующий массив, когда его флажок не установлен (например: пользователь отключает «Игры», метод в моих наборах контроллеров vm.markersGames = []) и повторно заполняет каждый массив при нажатии флажка (например: «Пользователь проверяет« Практики », метод внутри мой контроллер вызывает конечную точку API и заполняет vm.markersPractices).

Проблема, с которой я столкнулся, не знает, как правильно добавить «check/uncheck handlers» к моим input.

Попытка перезагрузить маркеры при проверке:

vm.checkToggle = function(isChecked, value) { 
    if (!isChecked) { 
    vm[value] = []; 
    } else { 
    getPlayerAddress(); 
    $scope.$apply(); 
    } 
};

getPlayerAddress() вызовы API для заполнения маркеров массива.

источник

2015-08-07 MattDionis

Вы можете использовать директиву ngChange, чтобы прослушать изменения на вашем входе.

Вот пример:

Контроллер

(function(){ 

function Controller($scope, Service) { 

    //Object to know if the input is checked or not 
    $scope.form = {}; 

    $scope.markersGames = []; 

    $scope.markersPractices = []; 

    //isChecked : input checked or not 
    //value : keyname of your array, for example markersGames 
    $scope.change = function(isChecked, value){ 
    !isChecked 
    //If input is not checked, set our $scope[value] to empty array 
    ? $scope[value] = [] 
    //If the input is checked, call Service 
    : Service.get(value).then(function(data){ 
     //Retrieve and set data 
     $scope[value] = data; 
    }); 
    } 

} 

angular 
.module('app', []) 
.controller('ctrl', Controller); 

})();

Затем вы можете использовать Услугу с обещанием сделать ваши запросы

Сервис

(function(){ 

    function Service($q){ 

    function get(url){ 

     var defer = $q.defer(); 
     var promise = defer.promise; 

     if (url === 'markersGames') { 
     defer.resolve([1,2,3,4]); 
     } else { 
     defer.resolve([4,6,8,1,5,2]); 
     } 
     return promise; 

    } 

    var factory = { 
     get: get 
    }; 

    return factory; 

    } 

    angular 
    .module('app') 
    .factory('Service', Service); 

})();

Затем вы можете добавить ngChange директиву в вашем HTML:

HTML

<body ng-app="app" ng-controller="ctrl"> 

    <form action="" class="form-inline" style="text-align:center"> 
    <label for="">General:</label> 
    <input type="checkbox" checked value="Games" ng-model="form.game" ng-change="change(form.game, 'markersGames')"> 
    <label for="" style="color:#000033">Games</label> 
    <input type="checkbox" checked value="Practices" ng-model="form.practice" ng-change="change(form.practice, 'markersPractices')"> 
    <label for="" style="color:#ffd900">Practices</label> 
    </form> 

    {{markersGames}} 
    {{markersPractices}} 


    </body>

источник

2015-08-07 12:46:18

Спасибо! У меня есть 95% пути. У меня проблема. Если я сниму флажок, маркеры исчезнут, как ожидалось. Тем не менее, когда я снова проверяю флажок, маркеры не отображаются повторно, пока я не щелкнул где-нибудь на карте (кажется, может быть проблема с каким-то вопросом цикла дайджеста?). – MattDionis

Да, вы можете попробовать использовать '$ apply', чтобы оценить переданную функцию и запустить цикл $ digest. –

К сожалению, я получаю 'Ошибка: [$ rootScope: inprog] $ применяется уже в процессе' при попытке этого. – MattDionis

Залить/очистить массив, если флажок установлен/снят флажок

ответ

Смежные вопросы