gpt4 book ai didi

javascript - 选中/取消选中复选框时填充/清除数组

转载 作者:行者123 更新时间:2023-12-03 09:19:34 24 4
gpt4 key购买 nike

我目前正在使用 angular-google-maps 构建具有多种不同标记类型的 map 。在我的 map 下面有一组简单的复选框,如下所示:

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

在我的 Controller 中,我初始化空数组,然后通过调用我的 API 端点用“标记”填充它们:

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

我想要做的是在未选中复选框时清除每个相应的数组(例如:用户取消选中“游戏”,我的 Controller 中的方法设置vm.markersGames = []),然后重新单击复选框时填充每个数组(例如:用户检查“Practices”,我的 Controller 中的方法调用 API 端点并填充 vm.markersPractices)。

我遇到的问题是不知道如何正确地将“检查/取消检查处理程序”添加到我的输入中。

选中时尝试重新加载标记:

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

getPlayerAddress() 调用 API 来填充标记数组。

最佳答案

您可以使用 ngChange 指令来监听输入的更改。

这是一个例子:

Controller

(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);

})();

然后您可以使用 promise 提出您的请求的服务

服务

(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);

})();

然后您可以在 html 中添加 ngChange 指令:

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>

关于javascript - 选中/取消选中复选框时填充/清除数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31877177/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com