我将设施复选框选项显示为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。只需创建另一个数组并相应地填充它。

您可以选择在现有数组上附加新属性,以保留true / false值,或者创建一个从原始数组映射的新数组。如果列出了ID,则只需将默认的false值切换为true(可通过拆分字符串来获取)。

这是一个小演示:



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/

10-10 00:30
查看更多