Angular.js is a powerful JavaScript framework that allows developers to create dynamic and interactive web applications. One common feature that many developers often need to implement in their applications is the ability to have checkboxes with select/unselect all functionality and the ability to mark checkboxes as indeterminate.
To achieve this functionality, we can use Angular.js along with a little bit of HTML and CSS. In this tutorial, I will walk you through the process of creating checkboxes with select/unselect all functionality and the ability to mark checkboxes as indeterminate.
Step 1: Setting up your project
First, you will need to create a new project folder and include the necessary Angular.js files. You can download the Angular.js library from the official website or include it via a CDN link in your HTML file.
<!DOCTYPE html>
<html>
<head>
<title>Angular.js Checkboxes Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="checkboxApp">Step 2: Define your Angular.js module and controller
Next, you will need to define an Angular.js module and controller in your HTML file. This will allow you to bind your checkboxes to the Angular.js model and manipulate their state.
<script>
angular.module('checkboxApp', [])
.controller('CheckboxController', function($scope) {
$scope.checkboxes = [
{name: 'Checkbox 1', checked: false},
{name: 'Checkbox 2', checked: false},
{name: 'Checkbox 3', checked: false},
{name: 'Checkbox 4', checked: false}
];
$scope.selectAll = function() {
angular.forEach($scope.checkboxes, function(checkbox) {
checkbox.checked = true;
});
};
$scope.unselectAll = function() {
angular.forEach($scope.checkboxes, function(checkbox) {
checkbox.checked = false;
});
};
$scope.toggleAll = function() {
angular.forEach($scope.checkboxes, function(checkbox) {
checkbox.checked = !checkbox.checked;
});
};
$scope.isIndeterminate = function() {
var selected = 0;
angular.forEach($scope.checkboxes, function(checkbox) {
if (checkbox.checked) {
selected++;
}
});
return (selected > 0 && selected < $scope.checkboxes.length);
};
});
</script>Step 3: Add the checkboxes to your HTML file
Now that you have defined your Angular.js module and controller, you can add the checkboxes to your HTML file. In this example, I have created a simple form with checkboxes, a select/unselect all button, and an indeterminate checkbox.
<div ng-controller="CheckboxController">
<form>
<input type="checkbox" ng-model="master" ng-change="selectAll()"> Select/Unselect All<br>
<label ng-repeat="checkbox in checkboxes">
<input type="checkbox" ng-model="checkbox.checked"> {{checkbox.name}}
</label>
</form>
<br>
<button ng-click="unselectAll()">Unselect All</button>
<p>Indeterminate: <input type="checkbox" ng-model="isIndeterminate()" ng-checked="isIndeterminate()"><br>
</div>Step 4: Add some CSS for styling
Finally, you can add some CSS to style your checkboxes and make them look more visually appealing.
<style>
input[type="checkbox"] {
transform: scale(1.5);
}
button {
margin-top: 10px;
padding: 5px 10px;
background-color: #3f51b5;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #1a237e;
}
</style>And that’s it! You have now created checkboxes with select/unselect all functionality and the ability to mark checkboxes as indeterminate using Angular.js. Play around with the code and customize it to fit the needs of your project. Happy coding!
