I have a checkbox <input type="checkbox" ng-model="search.isWorking" />
And after click on it I have filtered list with only true value, and it's Ok :)
But if I uncheked I want list with all vale (true and false) but angular give me only false value. How can I do that ?
Ohh, stackoverflow cut my code ;)
SOLVED: I do that:
<input type="checkbox" ng-model="search.isWorking" ng-click="onClick(search.isWorking)" />
$scope.onClick = function ($event) {
if($event === false)
{
$scope.search.isWorking = "";
}
}
After that i have a list without filtering in false value.
Related
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 have a list of checkboxes and at the top a all checkbox. When toggling the all checkbox, all checkboxes will get deselected or selected.
By default/initially, all checkbox is enabled with all checkboxes checked. So, I will deselect the all checkbox and all the checkboxes will uncheck. This passes no with no issues in protractor:
it('all checkbox is deselected', function() {
modelsAllCheckbox.click();
expect(modelsAllCheckbox.isSelected()).to.eventually.be.false;
});
it('all models should be deselected', function() {
ppvPercentages.modelChoices().then(function(modelChoices) {
modelChoices.forEach(function(modelChoice) {
expect(modelChoice.isSelected()).to.eventually.be.false;
});
});
});
this.modelChoices = function(rowNumber) {
return element.all(by.repeater('model in vehicleCheckboxes.models'));
}
Then I re-enable the all checkbox. I visually can see, in the browser, the all checkbox being checked in all the checkboxes successfully being checked/selected. Hoewever, in the test to assert they are all selected fails:
it('all button is re-enabled', function() {
modelsAllCheckbox.click();
expect(modelsAllCheckbox.isSelected()).to.eventually.be.true;
// give time for all models to set
browser.sleep(3000)
});
it('all models are selected', function() {
ppvPercentages.modelChoices().then(function(modelChoices) {
modelChoices.forEach(function(modelChoice) {
expect(modelChoice.isSelected()).to.eventually.be.true;
});
});
})
<div class="overflow-container">
<!-- all checkbox -->
<input type="checkbox"
ng-model="vehicleAllCheckbox.models"
ng-change="toggleAllModels(vehicleAllCheckbox, vehicleCheckboxes.models, vehicleCheckboxes.year)">All
<div ng-repeat="model in vehicleCheckboxes.models | orderBy: 'description' track by model.description">
<!-- the rest of the checkboxes -->
<input type="checkbox"
ng-change="modelCheckboxToggle()"
ng-model="model.checked" >
{{model.description}}
</div>
</div>
I see all the checkboxes are checked in the browser viusally. Why is modelChoice.isSelected() giving false instead of true up re-enabling the all checkbox?
The problem is in the way you are locating the checkboxes. Currently, you are targeting the parent div elements since you are using the by.repeater() locator:
<div ng-repeat="model in vehicleCheckboxes.models | orderBy: 'description' track by model.description">
Instead, point modelChoices to input elements (your checkboxes):
this.modelChoices = function(rowNumber) {
return element.all(by.repeater('model in vehicleCheckboxes.models')).all(by.model('model.checked'));
}
As a side note, I think you can improve the way you are expecting the checkboxes to be selected, by either using .each():
ppvPercentages.modelChoices().each(function (modelChoice) {
expect(modelChoice.isSelected()).to.eventually.be.true;
});
Or, by using .reduce():
var allSelected = ppvPercentages.modelChoices().reduce(function (acc, modelChoice) {
return modelChoice.isSelected().then(function (isSelected) {
return acc && isSelected;
});
}, true);
expect(allSelected).to.eventually.be.true;
Or, there are other ways as well.
I'm having a bit of trouble with ng-model. The function checkshow() is called whenever an option from the select box is selected. Depending on which buttons are selected it should call the function in the condition.
$scope.checkshow=function(item) {
alert(item);
var Name=item;
if ($scope.radioSelected === 'radiobutton1')
{ $scope.show(Name);
$scope.showfeature(Name);
}
else if($scope.radioSelected === 'radiobutton2' && $scope.checkboxed1 === 'detailchecked'){
alert("detail");
$scope.showDetails(Name);
}
else if($scope.radioSelected === 'radiobutton2' && $scope.checkboxed2 === 'comparechecked'){
alert("Surprise");
}
else{
$scope.showS(Name);
}
};
Only the if and else conditions are working, it never enters the else if part .
<input type="checkbox" id="chck1" disabled value="detailchecked" ng-model="checkboxed1">Detailed
<input type="checkbox" id="chck2" disabled value="comparechecked" ng-model="checkboxed2">Compare</label></td></tr>
There are 2 radiobuttions 1 and 2. I didn't write their code because conditions on them are working.
The model of a checkbox is a boolean: if the checkbox with ng-model="checkboxed1" is chceked, then $scope.checkboxed1 is set to true, otherwise it's set to false.
But you're comparing it to 'detailchecked', so that comparison will always be false.
Read the documentation: it explains how it works and has examples.
I hava a checkbox ,the model status.useJoin also bind the div.
<input type="checkbox" ng-model="status.useJoin" ng-click="toggleJoin($event);" >
<div ng-if="status.useJoin"> show area</div>
when status.useJoin is true ,will show div.
My question is ,when I want to prevent the default action of the checkbox. I will write function toggleJoin like this.
$scope.toggleJoin = function (dimension,$event) {
if (status.useJoin) {
$event.preventDefault();
return;
}
}
the checkbox action is stopped ,but status.useJoin is still modified. How can I stop the bind?
You can use ng-disabled directive
<input type="checkbox" ng-model="status.useJoin" ng-disabled="onYourDisableCondition();" >
$scope. onYourDisableCondition = function () {
if (status.useJoin) { //Add your additional conditions
return true;
}
}
We're trying to implement a checkbox and list with the following functionality:
Clicking the checkbox will either clear the array if there are items in there, or add a new item if not.
Remove an item from the array when clicking the Remove button, once the last item is removed the checkbox automatically unchecks itself.
The problem I am having is that if you click to remove each array item, then click the checkbox to add a blank entry, I'm expecting the checkbox to be checked again (as per the checked observable), however it is not?
I have the following code:
http://jsfiddle.net/UBsW5/3/
<div>
<input type="checkbox" data-bind="checked: PreviousSurnames().length > 0, click: $root.PreviousSurnames_Click" />Previous Surname(s)?
</div>
<div data-bind="foreach: PreviousSurnames">
<div>
<input type="text" data-bind="value: $data">
<span data-bind="click: $root.removePreviousSurname">Remove</span>
</div>
</div>
var myViewModelExample = function () {
var self = this;
self.PreviousSurnames = ko.observableArray(['SURNAME1', 'SURNAME2', 'SURNAME3']);
self.removePreviousSurname = function (surname) {
self.PreviousSurnames.remove(surname);
};
self.PreviousSurnames_Click = function () {
if (self.PreviousSurnames().length === 0) {
self.PreviousSurnames.push('');
}
else {
self.PreviousSurnames.removeAll();
}
alet(2)
}
}
ko.applyBindings(new myViewModelExample());
If you are using together the click and the checked then you need to return true from your click handler to allow the browser default click action which is in this case checking the checkbox:
self.PreviousSurnames_Click = function () {
if (self.PreviousSurnames().length === 0) {
self.PreviousSurnames.push('');
}
else {
self.PreviousSurnames.removeAll();
}
return true;
}
Demo JSFiddle.
You need to use a computed to monitor the length of the observable array. This way when the length reaches zero you can react to it automatically.
self.surnames = ko.computed(function() {
var checked = true;
if (self.PreviousSurnames().length === 0) {
self.PreviousSurnames.push('');
checked = false;
}
return checked;
});
Now you will have the blank text box when all of the names are cleared. If you update your binding on the checkbox it will function properly as well.
<input type="checkbox" data-bind="checked: surnames, click: PreviousSurnames_Click" />Previous Surname(s)?
FIDDLE