This code provides a practical solution for managing checkbox selections and keeping them synchronized with the target array. By integrating this code into your project, you can easily create a dynamic checkbox list with preselected items. It includes functions for checking and unchecking checkboxes, adding and removing items from the target array, and updating the user interface accordingly.
Simply incorporate this code snippet into your AngularJS application and customize the data array to meet your specific requirements. Enhance your application’s user experience by incorporating this convenient checkbox functionality.
How to Bound Checkboxes to Target Array using AngularJS
First of all, load the AngularJS and Bootstrap CSS (for basic interface) by adding the following CDN links into the head tag of your HTML page.
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js'></script> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css'>
Create the HTML structure as follows:
<body ng-app="myApp" ng-controller="myController">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{title}}</h3>
</div>
<div class="panel-body">
<h3>Checkboxes</h3>
<p>
The checkbox list comes from a complete array of options, the selected values are a different array. There are two problems:
<ul>
<li>setting initial checkboxes :: <strong>SOLVED</strong></li>
<li>syncing the target with the selectors :: <strong>SOLVED</strong></li>
</ul>
</p>
<p ng-repeat="item in allOptions" class="item" id="{{item.id}}">
{{item.id}} <input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item.id)"> Click this to sync this item with the target array. {{item}} Selected: {{bool}}
<h3>Final Data Array</h3>
<pre>{{data | json}}</pre>
<h3>All Checkboxes Array</h3>
<pre>{{allOptions | json}}</pre>
</div>
</div>
</body>
Style using the following CSS styles: (Optional)
.panel {
width:90%;
margin:2em auto;
}
Use the following AngularJS code to bind the checkboxes to the array. To customize the functionality of this code for your project, you can modify the data and allOptions arrays. The allOptions array contains the available checkbox options, while the data array holds the selected checkbox items. Simply update these arrays with your desired options and initial selections.
var lb = "• "; // used for console.log()
var myApp = angular.module("myApp", []);
myApp.controller('myController', function($scope) {
$scope.title = 'AngularJS Checkboxes Bound to Target Array with Initial Selections Checked';
$scope.content = '';
$scope.isChecked = function(id){
var match = false;
for(var i=0 ; i < $scope.data.length; i++) {
if($scope.data[i].id == id){
match = true;
}
}
return match;
};
$scope.allOptions = [
{
"id": "1",
"data": "one",
},
{
"id": "2",
"data": "two",
},
{
"id": "3",
"data": "three",
},
];
$scope.data = [
{
"id": "1",
"data": "one",
},
{
"id": "3",
"data": "three",
},
];
$scope.sync = function(bool, item){
if(bool){
// add item
$scope.data.push(item);
} else {
// remove item
for(var i=0 ; i < $scope.data.length; i++) {
if($scope.data[i].id == item.id){
$scope.data.splice(i,1);
}
}
}
};
});
That’s all! hopefully, you have successfully created Angularjs Checkboxes Bound To Target Array. If you have any questions or suggestions, feel free to comment below.
