Как проверить значения флажков с существующими разделенными запятыми значениями, хранящимися в БД с использованием Angular Js - PullRequest
Новая
       0

Как проверить значения флажков с существующими разделенными запятыми значениями, хранящимися в БД с использованием Angular Js

0 голосов
/ 05 июня 2018

Я показываю опции флажка удобства как ng-repeat массива json, и я сохраняю в базу данных в виде разделенных запятыми идентификаторов, таких как «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>

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Вам нужно использовать ng-model на каждом флажке, чтобы иметь возможность контролировать, проверены они или нет ... и иметь возможность определить, какие из них проверены на более позднем этапе, например, отправка формы.

Для этого:

  • Объекты удобств должны иметь свойство checked
  • Флажки в ng-repeat должны связывать ng-model с checked свойство 

<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", checked: false},
                  {id:2,value:"AC", checked: false},
                  {id:3,value:"Creditcard", checked: false},
                  {id:4,value:"24x7", checked: false},
                  {id:5,value:"Parking", checked: false},
                  {id:6,value:"Free delivery", checked: false},
                  {id:7,value:"No Smoking", checked: false}
                 ];

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

     var arrayOfExistingAmenities = $scope.existamenities.split(",");
     arrayOfExistingAmenities.forEach(function(existingAmenity) {
        $scope.amenities.forEach(function(amenity) {
            if (amenity.id == parseInt(existingAmenity)) {
                amenity.checked = true;
            }
        });
     });


});

</script>

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

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



</div>

</htmL>
0 голосов
/ 05 июня 2018

Я считаю, что для их проверки вам нужно установить ng-model в true или false.Просто создайте другой массив и заполните его соответствующим образом.

У вас есть возможность добавить существующий массив с новыми свойствами, которые будут содержать значения true / false, или создать новый массив, который был сопоставлен с исходным.Затем просто переключите значения по умолчанию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...