I have a scenario in which I have to put values in array when the checkbox is checked in ng-repeat.
<li ng-repeat="player in team.players">
<div class="row">
<div class="col-md-3 m-t-xs">
<input type="checkbox" ng-model="vm.newEvent.players[$index].selected" ng-change="vm.selectPlayer($index, player)"> {{player.name}}
</div>
<div class="col-md-5 m-t-xs">
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="injured"> Injured
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="sick"> Sick
</label>
<label for="">
<input type="radio" name="{{player.id}}" ng-change="vm.disSelectPlayer($index, player)" ng-model="vm.newEvent.players[$index].casuality.type" value="other"> Other
</label>
</div>
</div>
</li>
This is how it looks now in browser.
The issue is that when I clicked any of the player name in FC Barcelona Accordion it also selects the same indexed player from FC Bayern Munich Accordion, What I want is to keep all players separate form each-other.
Am i missing something in the binding ??
Use checklist-model, AngularJS directive for list of checkboxes
In Angular one checkbox <input type="checkbox" ng-model="..."> is linked with one model. But in practice we usually want one model to store array of checked values from several checkboxes. Checklist-model solves that task without additional code in controller. You should play with attributes of <input type="checkbox"> tag:
set checklist-model instead of ng-model
set checklist-value - what should be picked as array item
Documentation
This Because of this function: vm.disSelectPlayer($index, player)
I think you have to add index here <li ng-repeat="player in team.players"> in order to give each player different id or index.
Try This :
<li ng-repeat="(key ,player) in team.players">
and use this Key in the function that you call :
vm.disSelectPlayer($index, player , key)
I hope it is useful :)
This is because on on line #4 you wrote
ng-model="vm.newEvent.players[$index].selected".
You have used parents object ie players, instead of this you can use
ng-model="vm.player.selected".
OR
ng-model="vm.team.players[$index].selected".
Related
I have this HTML code
<div class="option-wrapper">
<label class="">
<input type="checkbox" name="name" value="1" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">1</span>
</label>
<label class="">
<input type="checkbox" name="name" value="2" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">2</span>
</label>
</div>
im trying to find the labels and to set a "style="display: none;"
like this <label class="" style="display: none;>
my problem is, I only need one of the labels in this div. But I don't have a class name or id to find one label. Do u guys know a solution for this?
Use document.getElementsByTagName('label') instead for all end then get them with the array offset. Or - to select the first - use document.getElementByTagName('label'). Notice the singular version of the second selector.
Or, a more general selector which you can use with either classes or tags or any other query string would be document.querySelector('label') or document.querySelectorAll('label')
I have a list of items inside a modal implemented using *ngFor with check boxes.
the objective is to strike out contents of item when checkbox is clicked.
initial code: jQuery in home.component.ts
$('body').on('click','#Check',function(){
if($(this).is(":checked")) {
$('.note').addClass('line-thr');
} else {
$('.note').removeClass('line-thr')
}
}
);
home.component.html:
<div class="form-check d-flex" *ngFor= 'let note of notes; let i = index'>
<input type="checkbox" class="form-check-input" value="supress" id="Check">
<div class="check-label note " id="{{i}>
{{note.text}}
<div class="float-right note">
{{note.date}}
</div>
</div>
</div>
The problem that occurs is when clicking on any checkbox, it adds class .line-thr to whole list. BUT I ONLY NEED TO STRIKE OUT THE ELEMENTS IN THAT PARTICULAR ITEM.
The solution could be to use an index number to make a different id for every list item, but I am not sure how to use this variable id in Javascript.
Using JQuery within angular will be a constant and sizeable challenge for you... it is advisable to avoid it.
You could do it in angular (without JQuery)
<input type="checkbox" class="form-check-input" value="supress" id="Check" (click)="noteClicked($event, note)">
<div class="check-label note " id="{{i}" [ngClass]="{'line-thr': note.checked}">
{{note.text}}
<div class="float-right note">
{{note.date}}
</div>
</div>
and in your component
noteClicked($event, note) {
note.checked = $event.currentTarget.checked;
}
Click here for Working example
You can do that even without adding any extra function in the ts file. Also, you do not need jQuery.
Add a new boolean field with the note object such as "checked".
In your HTML, bind this field with the checkbox
<input type="checkbox" [checked]="note.checked" class="form-check-input" id="Check">
Add dynamic css classes to your div element based on that "checked" boolean field of the note object. <div class="note" [ngClass]="{'line-thr': note.checked}" .....>
I am getting HTML data from an API and this Html has two radio buttons and some text. In my app, I am binding this Html in modal by [innerHtml]="example|safeHtml" and when I change the radio button option, I want to get these values on click of modal submit button. Here is my Html:
<div class="safeCustody-charge">
<p class="para1">This is to inform you that effective 1 September 2019</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios55" id="exampleRadios1" value="option1" checked="checked">
<label class="form-check-label" for="exampleRadios1">
<span style="color:red">Option 1:</span> I acknowledge the policy change
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios55" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
<span style="color:red">Option 2:</span> I do not wish to pay
</label>
</div>
Since you're putting the html in with the [innerHtml] directive, you cannot use any Angular mechanics do get the values. Try using vanilla js functions, like for example
document.getElementById('exampleRadios1').value
You may need to cast the returning element to a HTMLInputElement for type checks.
Personally I wouldn't get the HTML from a seperate resource. Instead you could return some JSON from your server, then use some *ngFor logic to display the content as needed.
what i am trying to do here is, i have an ng-repeat in a form and if i click anyone of those input buttons corresponding all buttons get disabled
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form >
<div ng-repeat=" option in question.questionOptions track by $index">
<label>
<input name="options" type="radio" value="$index" ng-click="sinSurCtrl.questionId=question.questionId; sinSurCtrl.answer=$index+1; sinSurCtrl.createAnswer()" onclick="this.disabled = true">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
here is the view-
as you can see if i select anyone of those option it is getting disabled but what i am trying to do is if i attempt anyone option then options corresponding to the same question get disabled.
for example-
in Q3. which is a better orator ?
if i choose option (a) then it get selected and after that automatically bot options (a) and (b) get disabled.
Note- please try to keep solution completely in angularjs or if you want use affordable amount of javascript other then that please avoid using external libraries like jQuery(i know nobody in his senses will handle trouble of using jQuery and angular together but for the sake of example i have included its name)
Proposed solution with some suggested refactoring...
First change the ng-click directive to point to a new onOptionButtonClicked function on sinSurCtrl which takes in the two parameters question and index (which it needs to carry out it's work):
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form>
<div ng-repeat="option in question.questionOptions track by $index">
<label>
<input
name="options"
type="radio"
value="$index"
ng-click="onOptionButtonClicked(question, $index)"
ng-disabled="question.disabled">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
Also take note of the newly added ng-disabled="question.disabled" directive. This is part of the mechanism that will enable/disable the question's controls.
Now move the variable assignments to the new onOptionButtonClicked function. The controller is generally a better place (than the view) for variable assignments, especially if there are several of them on the same directive.
sinSurCtrl.onOptionButtonClicked = onOptionButtonClicked;
function onOptionButtonClicked(question, index){
sinSurCtrl.questionId=question.questionId;
sinSurCtrl.answer=index;
sinSurCtrl.createAnswer();
question.disabled = true; // <--- This is what disables the option buttons
}
This is where an answered question object gets it's disabled property set to true. This in combination with the ng-disabled directive mentioned previously is what disables the option buttons.
On your controller, create a function that checks if a given questionId has been answered and return truthy if it has. Call that function in ng-disabled in the input tag:
<input type="radio" ng-disabled="sinSurCtrl.questionHasAnswer(question.questionId)" ... />
I'm trying to build a Angular 2 component which displays a list of options with radios. It works fine but it the answer field of the component, which is bound inside [(ng-model)]="answer", won't update when selecting one of the options. Am I doing something wrong or isn't this the way to create a list of radio selection options?
<div>
Answer: {{ answer }}
</div>
<div class="radio" *ng-for="#option of itemData">
<label>
<input type="radio" [value]="option.id" [(ng-model)]="answer"
(change)="responseChanged()" name="radio-list">
<span>{{ option.name }}</span>
</label>
</div>
Plunker
Well i guess two way binding is now working with radio, so currently you cannot use [(ng-model)].
The alternative is to use the change event and checked attribute. See my plunker
https://plnkr.co/edit/7Zm3qgoSv22Y9KrBn4tS?p=preview
(change)="answer=$event.target.value"
and
[checked]='answer==option.id'
You cannot use ng-model with radio boxes like in angular1. However there are several components on github that allows you to do it easily, like ng2-radio-group component. It has support for both radio select and multiple checkboxes select:
<radio-group [(ngModel)]="sortBy">
<input type="radio" value="rating"> Rating<br/>
<input type="radio" value="date"> Date<br/>
<input type="radio" value="watches"> Watch count<br/>
<input type="radio" value="comments"> Comment count<br/>
</radio-group>
<checkbox-group [(ngModel)]="orderBy">
<input type="checkbox" value="rating"> Rating<br/>
<input type="checkbox" value="date"> Date<br/>
<input type="checkbox" value="watches"> Watch count<br/>
<input type="checkbox" value="comments"> Comment count<br/>
</checkbox-group>