Learn the process of using Angular Js to compare checkbox values with stored comma-separated values in a database

Question

Learn the process of using Angular Js to compare checkbox values with stored comma-separated values in a database

When displaying amenity checkbox options using ng-repeat of a JSON array and saving them into the database as comma-separated IDs like "1,3,7" within a single string, the challenge arises when needing to edit the amenities. This is due to retrieving the existing values from the database as "1,3,7" within a single string format. How can this string be compared to the options in the ng-repeat to display the existing values as 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"},
                  {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"}
                 ];

     //Assuming this is an example of existing amenities from the 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>

javascript angularjs

Answer 1

Answer №1

To ensure that the checkboxes are properly checked, you should set the ng-model to true or false based on the values. You can achieve this by creating a new array and updating it accordingly.

One approach is to add new properties to the existing array that will store true/false values, or create a new array based on the original one. Then, you can change default false values to true if their corresponding ID is present in the list obtained by splitting the string.

Below is a simple demonstration:

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"}
  ];

  //Assuming this is the existing list of amenities from the 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>

Answer 2

To ensure that the checkboxes are properly checked, you should set the ng-model to true or false based on the values. You can achieve this by creating a new array and updating it accordingly.

One approach is to add new properties to the existing array that will store true/false values, or create a new array based on the original one. Then, you can change default false values to true if their corresponding ID is present in the list obtained by splitting the string.

Below is a simple demonstration:

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"}
  ];

  //Assuming this is the existing list of amenities from the 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>

Answer 3

Answer №2

To effectively manage the checkboxes and determine which ones are checked, you must utilize the ng-model directive for each checkbox. This allows you to track their status and identify the checked ones during form submission.

To implement this, follow these steps:

Include a checked property in the Amenities objects
Bind the ng-model of the checkboxes in the ng-repeat to the corresponding checked property

<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}
                 ];

     // Assume these are existing amenities fetched from the 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>

Answer 4

To effectively manage the checkboxes and determine which ones are checked, you must utilize the ng-model directive for each checkbox. This allows you to track their status and identify the checked ones during form submission.

To implement this, follow these steps:

Include a checked property in the Amenities objects
Bind the ng-model of the checkboxes in the ng-repeat to the corresponding checked property

<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}
                 ];

     // Assume these are existing amenities fetched from the 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>

Learn the process of using Angular Js to compare checkbox values with stored comma-separated values in a database

Answer №1

Answer №2

Similar questions

Issue with remove functionality in Vue js implementation causing erratic behavior in my script

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

Learn the process of eliminating special characters from input or textarea fields with AngularJs!

PHP Header Redirect Not Redirecting Correctly

Dealing with Laravel and AJAX - Issue with Loading DIV

Explore innovative circular navigation with the wheelnav.js library - where SVG elements can dynamically change position but keep

What is the best way to display a div based on a keyword match?

What is the best way to create a flexible Ul-LI menu?

Instructions on inserting an IFRAME using JavaScript into dynamically loaded content via AJAX

The issue of variable being undefined in JSON for JavaScript and Python

What's the Hold-Up with IntersectionObserver in Brackets?

The evaluate function is not functioning as expected

A guide on instantly updating displayed flat/section list elements in React Native

attempting to refine an array of objects using another array within it

Revamp your array elements with MongoDB - Substring replacement

The inclusion of a content editable feature within a carousel is leading to unexpected event propagation

What is the best way to dynamically write a knockout data binding event using jQuery?

Encountering a problem during the installation of the udev module in a Node.js

Issues with Three.js materials not rendering properly when loading .obj and .mtl files

Is it possible to retrieve resolved parameters from a template-rendering function?