Allow Only One Checked Checkbox, Angular Best Practice.

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



Leave a reply



Submit