I'm trying to put a checkbox in a tabset title, but it doens't seem to work. I really appreciate some help. My simplified code look like this:
<ngb-tabset>
<ngb-tab>
<ng-template ngbTabTitle>
<input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab(i)" />
Result
</ng-template>
<ng-template ngbTabContent>
<input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab()" />
...
The model is being changed as I can see in the second "test-checkbox" and the console, but the activation-state is not shown by the checkbox in the title. Does anybody has an idea how this can going to work, please?
regards,
Lars
I believe it's the event handling in ng-boostrap's tab selection that is interfering with the checkbox selection (when the checkbox is in the header). To get around this, you can pass $event into the (click) handler for the checkbox and call event.stopPropagation();:
HTML
<ngb-tabset>
<ngb-tab>
<ng-template ngbTabTitle>
<input type="checkbox" [(ngModel)]="selectedTabs" (click)="selectTab($event)" />
Result
</ng-template>
<ng-template ngbTabContent>
<input type="checkbox" [(ngModel)]="selectedTabs" />
</ng-template>
</ngb-tab>
...
</ngb-tabset>
Typescript
public selectTab(event): void {
this.selectedTabs = !this.selectedTabs;
console.log(this.selectedTabs)
event.stopPropagation(); // Prevents event propogation and the checkbox is selected/deselected
}
Please see this StackBlitz for a demo.
Related
I have a dropdown that using multiselect dropdown .The dropdown values are remove every time I'm clicking in a cross button in the dropdown after I'm removing some items the dropdown is coming as blank .it may be html issue I will include the html code below can I get a solution for this issue
<kendo-multiselect #accountingStandareddrpdwn iconClass="k-i-arrow-chevron-down" [data]="accountingStandards"
[(ngModel)]="selectedAccountingStandard" [textField]="'Name'" [ngModelOptions]="{standalone: true}"
[valueField]="'ID'" (valueChange)="getAccountingStandard($event)" >
<ng-template kendoMultiSelectItemTemplate let-dataItem>
<input type="checkbox" class="k-checkbox" [checked]="isItemSelectedAccountingStandard(dataItem)">
<label class="k-checkbox-label" style="padding-left:25px !important;">{{ dataItem.Name }}</label>
</ng-template>
<ng-template kendoMultiSelectNoDataTemplate>{{No_Data_Found}}
</ng-template>
</kendo-multiselect>
I want a solution for this issue
I have some input checkbox which is created inside ng-repeat
<li ng-repeat="item in tasks track by $index">
<input type="checkbox" ng-init="setChecked(item.status)"
ng-checked="changeStatus(item.id)"
ng-model="item.status" value="{{item.id}}">
<span ng-model="item.title" ng-keyup="completeEdit(item.id)"
contenteditable="false" ng-dblclick="contentEdit()"
class="done-{{item.status}}">{{ item.title }}
</span>
</li>
What I am trying to achieve is, based on a data item property the checkbox should show either checked or unchecked. For that I am using ng-init of the checkbox. Below is the function I am calling in ng-init
$scope.setChecked = function(status) {
event.target.checked = status;
};
But the problem is the above function is not making change to checkbox. The checkbox is always showing unchecked even if the status is true
Can anyone tell me what I am doing wrong in the above code?
Any help is appreciated :)
To make the checkbox checked or unchecked I should have used ng-checked and for update the status I used ng-change. This fixed the problem for me.
<input type="checkbox" ng-change="changeStatus(item.id)"
ng-checked="item.status" ng-model="item.status"
value="{{item.id}}">
Should be simple - what am I doing incorrectly?
In my controller:
$scope.eventShow = {tab: 'stations'};
and, in a view:
Show:
<span>
<label>Stations</label>
<input type="radio" ng-model="eventShow.tab" value="stations" class="check_box" />
</span>
<span>
<label>Visitors</label>
<input type="radio" ng-model="eventShow.tab" value="visitors" class="check_box" />
</span>
I want the radio buttons to toggle, when one is clicked, and $scope.eventShow.tab to be updated appropriately
Your code is working correctly for me. what version of angular are you using? I am using this:
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
or is it possible you do not have ng-controller in the html?
I am using ng-repeat in angularjs to display several checkboxes.
<div class="checkbox" ng-repeat="subject in priceinformation.subjects">
<label>
<input type="checkbox" ng-model="priceinformation.subscriptioninfo.subject.name"> {{subject.name}}
</label>
</div>
The problem is all the checkboxes are using the same model, hence if I check one, all are checked. I want to do it in a way that the model can resolve to different values. e.g.
ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}"
{{subject.name}} should resolve to something like English, History etc, hence a different model for each checkbox.
But ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}" is giving an error.
Note: {{subject.name}} is resolving correctly used elsewhere, and 'priceinformation.subscriptioninfo.subject' is working correctly.
Use [] instead of .
ng-model="priceinformation.subscriptioninfo[subject.name]"
Plnkr Demo
Script
$scope.priceinformation ={};
$scope.priceinformation.subjects = [{"name":"English"},{"name":"History"},{"name":"Maths"}];
$scope.priceinformation.subscriptioninfo ={};
<div ng-repeat="item in checks">
<input type="checkbox" ng-model="item.checked">{{item.name}}
</div>
See Plunkr
My task is: group of checkboxes must be checked(all), if checkbox-parent has been checked. Sure, using Angular. OK, what am I doing:
My parent checkbox is gettring the ng-model directive:
<input type="checkbox" ng-model="checked" ng-true-value="checked" ng-false-value="" id=""/> {{filterValue.title}}
Sub-checkboxes are getting the next:
<input type="checkbox" {{checked}} id=""/> {{subNodeValue}}
Trying: no check in the last case, however {{checked}} calculates successfully out of the <checkbox>.
What am I doing wrong ?
UPD:
Sub-checkboxes are created by this:
<ul id="id" class="groupList">
<li ng-repeat="subNodeValue in filterValue.subNodesValues">
<input type="checkbox" {{checked}} id=""/> {{subNodeValue}} {{checked}}
</li>
</ul>
Use the ngChecked directive instead of doing it that way (http://docs.angularjs.org/api/ng.directive:ngChecked). They have a master/slave checkbox example on there too
You can't use {{}} alone inside an element. Use ng-checked=checked instead.
Here is a working plunker: http://plnkr.co/edit/vBftwH4MwkeSiC90AltU?p=preview