Allow only one checked checkbox, Angular best practice.
Since you can't use radio buttons, I've made this plnkr when you check one the others are deselected:
http://plnkr.co/edit/apSE3cIXA7DIvulBfNGX?p=preview
<label> <input type="checkbox" name="groupA" ng-model="vm.a1" ng-change="vm.a2 = false; vm.a3 = false; vm.changeGroupA()" > A1 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.a2" ng-change="vm.a1 = false; vm.a3 = false; vm.changeGroupA()" > A2 </label>
<label> <input type="checkbox" name="groupA" ng-model="vm.a3" ng-change="vm.a2 = false; vm.a1 = false; vm.changeGroupA()" > A3 </label>
Hope it helps =)
Edit: You can probably change the state of the other checkboxes in the controller for best practice, made in the html just to demonstrate more quickly..
Allow check only one checkbox and get value of checked
Here is the code:app.component.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular";
public checklist: any[];
constructor() {
this.checklist = [
{ id: 1, value: "value1", isSelected: false },
{ id: 2, value: "value2", isSelected: false }
];
}
isAllSelected(item) {
this.checklist.forEach(val => {
if (val.id == item.id) val.isSelected = !val.isSelected;
else {
val.isSelected = false;
}
});
}
}
app.component.html
<hello name="{{ name }}"></hello>
<div class="col-md-12 align-items-center">
<ul class="list-group">
<li class="list-group-item" *ngFor="let item of checklist">
<input type="checkbox" value="{{item.id}}" [checked]="item.isSelected"
(change)="isAllSelected(item)"/>
{{item.value}}</li>
</ul>
</div>
Angular JS + Button should be enabled if at least one checkbox is checked how To do it?
Finally it is done. I have done it using grep
in jQuery.
$scope.userSelectionChanged = function () {
$scope.enableAddBtn = $.grep($scope.userlists, function (user) {
return user.IsSelected;
}).length >= 1;
};
Angular checkbox only binds one way with Firestore doc
Add multiple checkboxes based on input length in Angular
use *ngFor
for acheiving this
app.component.html
<div *ngFor="let item of arr;">
<input type="checkbox" id="{{item}}" [value]="item " (change)="getItem($event)">
<label for="{{item}}"> {{item }}</label>
</div>
app.component.ts
arr = ['Apple', 'Mango','Banana'];
getItem(item) {
//check if the checkbox selected or not
if(item.target.checked) {
let value = item.target.value;
console.log(value);
//Do your thing here
}
}
Hope this help's :)
Select all the checkboxes inside the same loop iteration using AngularJS
This almost certainly doesn't follow best practices but I'm a noob with Angular. It does work though:
http://plnkr.co/edit/oGNC3ZUZHDHrBrMyRKjW?p=preview
var app = angular.module("CheckAllModule", []);
app.controller("checkboxController", function($scope) {
$scope.struct = ['First', 'Second'];
$scope.checkAll = function(selected, chkArray) {
for (var chk in chkArray) {
chkArray[chk] = selected
}
};
});
I made some adjustments to your html to get this working:
<div ng-app="CheckAllModule">
<div ng-controller="checkboxController">
<ul ng-repeat="s in struct" data-ng-init="x[1]=false;x[2]=false;x[3]=false">
<li>
<strong>{{s}} item</strong>
<input type="checkbox" ng-checked="x[1] && x[2] && x[3]" ng-model="selectedAll" ng-click="checkAll(selectedAll, x)" />
</li>
<label>Subitem A
<input type="checkbox" ng-model="x[1]" />
</label>
<label>Subitem B
<input type="checkbox" ng-model="x[2]" />
</label>
<label>Subitem C
<input type="checkbox" ng-model="x[3]" />
</label>
</ul>
</div>
</div>
Update
I was thinking about how better to test x1 && x2 && x3
the conversion to an array was the first step but then you can do:
x.indexOf(false)
(Ideally you would use .reduce(function(a,b) { return a && b; })
but reduce
is not yet well enough supported and to be fair, it's a bit more clunky) - strangely this is not working yet.
Related Topics
How to Export Json Data to Excel File Using JavaScript
Slick Carousel - Force Slides to Have the Same Height
How to Save an Image to Localstorage and Display It on the Next Page
Javascript Submit Multiple Forms With One Button
React Typescript Is Not Assignable to Parameter of Type
How to Show an Alert After Reloading the Page in JavaScript
Css Div Height Not Expanding to Fit Content or Wrapping Content
Export Array of Objects into Excel Using JavaScript
Detect If Html5 Video Element Is Playing
Allow Only One Checked Checkbox, Angular Best Practice.
How to Get Line Break Within String Interpolation in Angularjs
Download Image as File in Typescript
How to Display the Entire Object in Console in React Native
Disable Prev Control on First Slide and Disable Next Control on Last Slide
How to Push Array to Json Object in Angular