gpt4 book ai didi

javascript - 如何使用 Angular Js 检查复选框值以及存储在数据库中的现有逗号分隔值

转载 作者:行者123 更新时间:2023-12-01 01:59:49 26 4
gpt4 key购买 nike

我将便利设施复选框选项显示为 json 数组的 ng-repeat,并以逗号分隔的 ID(例如“1,3,7”)作为单个字符串存储到数据库中,但是当我需要编辑便利设施复选框时,我无法显示已检查现有选项,因为我从 db 获取现有值作为单个字符串 1,3,7 我将如何使用 ng-repeat 中的选项检查此字符串?

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.amenities=[{id:1,value:"Wifi"},
{id:2,value:"AC"},
{id:3,value:"Creditcard"},
{id:4,value:"24x7"},
{id:5,value:"Parking"},
{id:6,value:"Free delivery"},
{id:7,value:"No Smoking"}
];

//For example assume that this is existing amenities from database
$scope.existamenities="1,3,7";
});

</script>

<htmL>
<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="amn in amenities">
<label>{{amn.value}}
<input type="checkbox" name="amenities" ng-value="amn.id">
</label>
</div>



</div>

</htmL>

最佳答案

我相信要检查它们,您需要将 ng-model 设置为 true 或 false。只需创建另一个数组并相应地填充它即可。

您可以选择向现有数组追加将保存真/假值的新属性,或者创建一个从原始数组映射的新数组。然后,只需将默认的 false 值切换为 true 如果列出了其 ID,您可以通过拆分字符串来获取该 ID。

这是一个小演示:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.amenities = [
{id:1,value:"Wifi"},
{id:2,value:"AC"},
{id:3,value:"Creditcard"},
{id:4,value:"24x7"},
{id:5,value:"Parking"},
{id:6,value:"Free delivery"},
{id:7,value:"No Smoking"}
];

//For example assume that this is existing amenities from database
$scope.existamenities = "1,3,7";

var a = $scope.existamenities.split(",").map(x => Number(x))
var b = $scope.amenities.map((x) => {
return {
"id": x.id,
"val": false
}
})
for (var i = 0; i < b.length; i++) {
for (var j = 0; j < a.length; j++) {
if (b[i].id == a[j]) {
b[i].val = true
}
}
}
$scope.model = b;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="amn in amenities">
<label>{{amn.value}}
<input type="checkbox" name="amenities" ng-model="model[$index].val" ng-value="amn.id">
</label>
</div>

关于javascript - 如何使用 Angular Js 检查复选框值以及存储在数据库中的现有逗号分隔值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50694955/

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