Is it possible to include all check boxes in the list if one is selected. For example, 10 checkboxes on the page and we check the 5th - so 1,2,3,4,5 should be checked.
Does anybody have an example of this with angular JS?
As pointed out by Blackhole, a possible solution would be using ng-change on your checkboxes.
your html:
<input type="checkbox" ng-repeat="bx in boxes" ng-model="bx.value" ng-change="boxChecked($index, bx.value)">
in controller:
$scope.boxChecked = function(index, value) {
for (var i = 0; i < index; i++) {
$scope.boxes[i].value = value;
}
}
Related
I am working on new angular 6 application and i am new to angular 6.
I have to implement the new function like.i am having one html table with multiple column some of them have checkbox along with id in hiddenfield. Now i have one button which is outside html table.
Now on the hutton click i have to get selected rows of one checkbox column. I have tried to search same on google but not getting any good solution for this.
Can anyone help to achive these functionality.
Thanks in advance.
Omkar
you can do this stuff without the need of button by following :
checkbox :
<input type='checkbox' ng-repeat="fruit in fruits"
ng-checked="checkedFruits.indexOf(fruit) != -1" ng-click="toggleCheck(fruit)">
the function get called :
function SomeCtrl ($scope) {
$scope.fruits = ["apple, orange, pear, naartjie"];
$scope.checkedFruits = [];
$scope.toggleCheck = function (fruit) {
if ($scope.checkedFruits.indexOf(fruit) === -1) {
$scope.checkedFruits.push(fruit);
} else {
$scope.checkedFruits.splice($scope.checkedFruits.indexOf(fruit), 1);
}
};
}
I want to do only one checkbox selected at a time in ngFor in angular 5.
i have the following code below.
<div class="form-check" style="margin-top:0;">
<label class="form-check-label">
<input class="form-check-input" id="res{{restaurant._id}}" (change)="selectRestaurant(restaurant,i)" [checked]="restaurant.checked" type="checkbox">
<span class="form-check-sign"></span>
</label>
</div>
And in my component
selectRestaurant(restaurant: any, i: any) {
if (restaurant) {
restaurant.checked = !restaurant.checked;
}
}
So any possible solution for only one checkbox selected in given list?
You have to bind the checkbox item with ngmodel to the specific instance in for loop.
This you can try with ReactiveForms. See one example https://stackblitz.com/angular/ayqnbvbkmpy
I saw many examples with loop using. But I`am think its bad idea when checkboxes are too many. I recommend to use another way.
Create variable to contain checkbox index.
public checkboxIndex = 0; //default value for checking
public checkboxModel = [];
ngOnInit() {
for (let i = 0; i < checkboxCount.length; i++) {
this.checkboxModel.push({ name: `${i}`, enabled: false });
}
public checkboxChange(index) {
if (this.checkboxIndex !== index) {
this.checkboxModel[this.checkboxIndex].enabled = false;
}
this.checkboxIndex = index;
}
//HTML
<div *ngFor="let checkbox of checkboxCount.length; let i = index">
<input type="checkbox" [(ngModel)]="checkboxModel[i].enabled"
name="checkboxModel[i].name"
(change)="checkboxChange(i)"> </input>
</div>
It should help. Please correct me if I made some mistakes.
I am trying to implement a Kendo ui-Menu in the toolbar of a Kendo Grid in Angular. I am manually creating the column list on the menu. I am able to show/hide the columns when clicking the checkboxes. I need to iterate through the checkboxes when the menu opens so that I can set checked/unchecked based on the options set on each column in the grid. The problem is that I don't know how to access the check/unchecked of the child nodes.
The code below gets all of the child nodes, but I don't know how to access their checked/unchecked values:
var columns = $(e.item).find(".k-item:not(:has(.k-group))");
I have a Dojo setup where the check/uncheck works, but I don't know how to access them from 'onOpen'. Any assistance is grealy appreciated.
First you have to find checkbox element and then you can get checkbox checked value by using .prop("checked") method.
So if you eg. want to switch checkboxes values on menu open you can use:
$scope.onOpen = function(e) {
var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
for(var i = 0; i < checkboxes.length; i++){
var checkbox = $(checkboxes[i]);
checkbox.prop("checked", !checkbox.prop("checked"));
}
}
Updated dojo: http://dojo.telerik.com/OnAXI
Thanks to Jarosław Kończak who put me on the right path, here is how I eventually was able to use the "hidden attribute" on my columns to set the checkboxes as checked or !checked by altering his suggestion just a little:
$scope.onOpen = function(e) {
var checkboxes = $(e.item).find(".k-item:not(:has(.k-group))").find("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = $(checkboxes[i]);
if (checkbox.prop("checked")) {
var fieldData = checkbox.data("field");
var columns = $scope.SearchGrid.columns;
for (var x = 0; x < columns.length; x++) {
if (columns[x].field == fieldData) {
if (columns[x].hidden == true) {
checkbox.prop("checked", false);
}
}
}
}
}
}
Here is a working Dojo with dynamically created columns instead of the "manual" column list.
I set the ng-checked directive in the Create page (used in edit too) based on data from the database. but the problem is that I can't uncheck it, so I can't edit the data:
<md-input-container class="md-block" flex-gt-sm="25" flex="45" content-layout-align="center start" ng-repeat="tab in allTabs">
<md-checkbox class="chbox" aria-label="tab.name" checklist-model="entity.tabs" checklist-value="tab" ng-checked="setCheck(tab.id)">
{{tab.name}}
</md-checkbox>
</md-input-container>
controller:
$scope.setCheck = function (id) {
var alltabs = $scope.allTabs;
for (var i = 0; i < alltabs.length; i++) {
if (alltabs[i].id == id)
return true
return false
}
}
is there a way to allow this in angular?
First of all, your for-loop is wrong. Put your return false statement outside the for-loop:
for (var i = 0; i < alltabs.length; i++) {
if (alltabs[i].id == id)
return true;
}
return false;
Secondly, if you want to be able to check/uncheck the checkboxes, you should not use ng-checked. This directive reads every digest if the checkbox should be checked and behaves accordingly (see the note in the documentation).
If you're using ng-model (or in this case checklist-model) you can just remove the ng-checked, because the checklist-model will just check the array for the already checked tabs.
I have successfully created functionality to check a hidden checkbox on the ng-click of the row that the checkbox exists in that is generated with an ng-repeat. However, I also have functionality that adds that item to a separate array when the checkbox is checked using the ng-change directive.
My code works perfectly if I un-hide the element and check the checkbox directly, but if I use the ng-click directive on the TR, the checkbox gets checked (visibly) but the array isn't updated. If I then click on it again, it remains checked and the item is added to the new array.
This isn't an issue where the ng-click is taking two clicks to fire. Here is my markup:
<tr ng-cloak ng-repeat="item in mostRecent | orderBy:sortType:sortReverse | filter: query" class="hovered" ng-class="{'hide':showReports && item.status == 'Not Started' || showReports && item.status == 'inProgress','rep-checked': bool}" ng-click="bool = !bool">
<td class="hidden"><div class="checkbox">
<label class="checkbox">
<input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item)">
</label>
</div></td>
and the js:
$scope.isChecked = function(id) {
var match = false;
for(var i=0 ; i < $scope.selectionData.length; i++) {
if($scope.selectionData[i].id == id){
match = true;
}
}
return match;
};
// Create a new array from the selected data
$scope.selectionData = [];
var selectionData = $scope.selectionData;
var result = selectionData.filter(function(e){ return e.id == id; });
$scope.sync = function(bool, item){
if ($scope.selectionData) {
$scope.selectionData.push(item);
}
else {
$scope.selectionData.splice(item);
}
console.log('check' + $scope.selectionData);
};
After some deeper research, I found that the ng-click function on the input isn't registering because the ng-click function of the tr element isn't actually emulating a click event on the input. I added a dynamic ID and replaced the ng-click function with a javascript function of
getElementById('checkboxID').click();
And it worked as expected.