Description :
In this example of Ng-Checked, We have two checkboxes with same ng-model variable so if we check the checkbox then the other value will be checked and the vice versa. See the code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
<div class="container">
<label>Check both: <input type="checkbox" ng-model="master"></label><br />
<input type="checkbox" ng-checked="master">
</div>
</body>
</html>
Description :
In this example of Ng-Checked, We will have a grid with checkbox and we will delete the records for which the checkboxes are checked and also provided a checkbox that will check all the checkboxes and clicking on delete will delete the records. See the working example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
<div ng-controller="ExampleController">
<div class="container">
<label>Delete All: <input type="checkbox" ng-model="master"></label><input type="button" class="btn btn-danger btn-xs" ng-click="delete(master)" value="Delete" /><br />
<table class="table table-hover">
<thead><tr><th>Id</th><th>First Name</th><th>Last Name</th><th>Action</th></tr></thead>
<tbody><tr ng-repeat="p in names | orderBy:'fName'"><td>{{p.id}}</td><td>{{p.fName}}</td><td>{{p.lName}}</td><td><input type="checkbox" ng-checked="master" ng-model="isTrue" ng-change="getIndex(p.id,isTrue )" /></td></tr></tbody>
</table>
</div>
</div>
<script>
var app = angular.module("checkedExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
var arr = [];
$scope.names = [{ id: '1', fName: 'John', lName: 'NA' }, { id: '2', fName: 'Smith', lName: 'NA' }, { id: '3', fName: 'Allen', lName: 'NA' }, { id: '4', fName: 'Marry', lName: 'NA' }, { id: '5', fName: 'Jennifer', lName: 'NA' }];
$scope.getIndex = function (id, isTrue) {
if (isTrue)
arr.push(id);
else {
var index = arr.indexOf(id);
arr.splice(index, 1);
}
};
$scope.delete = function (isMaster) {
if (isMaster) {
$scope.names = [];
}
else {
for (var i = 0; i < arr.length; i++) {
var rec = $scope.names.filter(function (p) { return p.id == arr[i] });
var idx = $scope.names.indexOf(rec[0]);
$scope.names.splice(idx, 1);
}
};
arr = [];
};
}]);
</script>
</body>
</html>
Description :
In this example of Ng-Checked, We have multiple checkboxes and their model names are different and Clicking on the checkboxes will show the output in json format. See the working example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
<div ng-controller="ExampleController">
<div class="container">
<input type="checkbox" ng-checked="testModel.child_1 && testModel.child_2 && testModel.child_3 && testModel.child_4 && testModel.child_5" ng-model="isChecked" /> <b>Select All</b><br />
<input type="checkbox" ng-model="testModel.child_1" ng-checked="isChecked" /> First<br />
<input type="checkbox" ng-model="testModel.child_2" ng-checked="isChecked" /> Second<br />
<input type="checkbox" ng-model="testModel.child_3" ng-checked="isChecked" /> Three<br />
<input type="checkbox" ng-model="testModel.child_4" ng-checked="isChecked" /> Four<br />
<input type="checkbox" ng-model="testModel.child_5" ng-checked="isChecked" /> Five<br />
<br /> <b>isAllSelected = {{isChecked}}</b>
<pre>{{testModel|json}}</pre>
<hr />
</div>
</div>
<script>
var app = angular.module("checkedExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
}]);
</script>
</body>
</html>
Description :
Another example of Ng-Checked
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
<div ng-controller="ExampleController">
<div class="container">
Click to select or deselect All: <input type="checkbox" ng-model="master"> <br />
<br />Check1:
<input type="checkbox" ng-checked="master" ng-model="Check1">
<br />Check2:
<input type="checkbox" ng-checked="master" ng-model="Check2">
<br />Check3:
<input type="checkbox" ng-checked="master" ng-model="Check3">
<hr />
<br /> <b>master = {{master}}</b>
<br /> <b>Check1 = {{Check1}}</b>
<br /> <b>Check2 = {{Check2}}</b>
<br /> <b>Check3 = {{Check3}}</b>
</div>
</div>
<script>
var app = angular.module("checkedExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
}]);
</script>
</body>
</html>
Description :
Example of Ng-Checked:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
<div ng-controller="ExampleController">
<div class="container">
<div ng-repeat="item in items">
<b>{{item}}</b> <span ng-if="isExists(item)" style="color:lightgreen">selected</span>
</div>
<hr />
<div ng-repeat="item in items">
<input type="checkbox" ng-checked="isExists(item)" ng-click="toggle(item)" />
{{item}}
</div>
<input type="checkbox" ng-checked="selected.length >= 2" ng-disabled="true">Two or more items selected
<span>Selected: {{ selected }}</span>
</div>
</div>
<script>
var app = angular.module("checkedExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.items = ["AngularJs", "Bootstrap", "JQuery", "LearnIt", "javaScript"];
$scope.selected = [];
$scope.toggle = function (item) {
var idx = $scope.selected.indexOf(item);
if (idx > -1)
$scope.selected.splice(idx, 1);
else
$scope.selected.push(item);
};
$scope.isExists = function (item) {
return $scope.selected.indexOf(item) > -1;
};
}]);
</script>
</body>
</html>
Description :
Example of Ng-Checked:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="checkedExample">
<div ng-controller="ExampleController">
<div class="container">
<h2>What are your favorite sports?</h2>
<div ng-repeat="sport in sports">
<label>{{sport.label}}</label>
<input type="checkbox" ng-model="sport.selected" ng-true-value="'YES'" ng-false-value="'NO'">
<label>
ng-checked: <input type="checkbox" ng-checked="sport.selected === 'YES'">
</label>
<div>
Current state: {{sport.selected}}
</div>
</div>
</div>
</div>
<script>
var app = angular.module("checkedExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.sports = [{ label: 'Basketball', selected: 'NO' }, { label: 'Cricket', selected: 'YES' }, { label: 'Tennis', selected: 'NO' }, { label: 'Badminton', selected: 'YES' }
];
}]);
</script>
</body>
</html>
Description :
Another example of Ng-Checked:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.divStyle {
height: 60px;
width: 60px;
float: left;
margin: 5px;
}
span {
color: white;
}
</style>
</head>
<body ng-app="checkedExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="row">
<label>Delete All <input type="checkbox" ng-model="master" /></label>
<div ng-repeat="div in noOfDivs">
<div class="divStyle" style="background-color: maroon;" ng-click="toggle(div);div.checked=!div.checked">
<input type="checkbox" ng-checked="master" ng-click="div.checked=!div.checked" ng-model="div.checked" />
<span>IMG-{{div.name-1000}}</span>
</div>
</div>
</div>
<div class="row">
<input type="button" class="btn btn-danger" ng-click="delete()" value="Delete" />
</div>
</div>
</div>
<script>
var app = angular.module("checkedExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.noOfDivs = [];
for (var i = 1000; i <= 1025; i++) {
$scope.noOfDivs.push({ name: i });
};
$scope.selectedDiv = [];
$scope.toggle = function (id) {
var index = $scope.selectedDiv.indexOf(id);
if (index > -1)
$scope.selectedDiv.splice(index, 1);
else
$scope.selectedDiv.push(id);
};
$scope.delete = function () {
if ($scope.master)
$scope.noOfDivs = [];
else {
for (var i = 0; i < $scope.selectedDiv.length; i++) {
var idx = $scope.noOfDivs.indexOf($scope.selectedDiv[i]);
$scope.noOfDivs.splice(idx, 1);
};
$scope.selectedDiv = [];
};
};
}]);
</script>
</body>
</html>
Description :
Ng-checked is basically used to set the selection of check boxes and radio buttons etc, Here in our example we are taking 1 check box and 2 radio buttons where radio buttons are dependent on check box selection means one radio button will be selected if check box is checked and other one is selected if check box is unchecked. Lets take an example of party :) :
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="sampleController">
Are you going for party tonight: <input type="checkbox" ng-model="checked">
<br/> <br/>
You should go, Complete this example and rest examples you can learn tomorrow :), So click on the check box above:
<br/> <br/>
<input id="checkSlave" type="radio" ng-checked="checked">Yeah :)
<input id="checkSlave" type="radio" ng-checked="!checked"> Sad :(
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller('sampleController', ['$scope', function ($scope) {
}]);
</script>
</body>
</html>