I am trying to bind CheckBoxes using CheckList Model. I am only able to get one value bound at a time and not multiple. This is based on implementation described in GitHub: http://vitalets.github.io/checklist-model/.
<h5>Transaction Type</h5>
<div class="filter-group">
<div class="checkbox-inline" ng-repeat="picklistItem in controller.transactionTypePickList">
<label class="filter">
<input type="checkbox" checklist-value='picklistItem' checklist-model="controller.data.filter.TransactionTypes" />
{{picklistItem.Value}}
</label>
</div>
</div>
Any ideas why I am able to get only one value selected at a time.
Thanks in advance !!!!
Related
I want to make interview questions form with ng-repeat, where when i click submit, it will send all the data, so i need different ng-model for that.
Here is my code
<form role="form" name="interviewForm">
<div class="pr_setportfolio_content interview_div" ng-show="setinterview == true">
<div class="prterms_name_input" ng-repeat="interview in interview">
<span class="prterms_input_text">
{{interview.question}}
</span>
<textarea class="prterms_inputtextarea_name" ng-model="interview_answer" name="interview_answer" placeholder="Enter answer" msd-elastic auto-resize></textarea>
</div>
</div>
</form>
So, anyone have any idea how to make it?
Thank you
Use same model (for example interview.answer instead of interview_answer) for holding answers and then you can get answer for each question in same model. Just iterate on interview list and each index will hold one question and its answer
<form role="form" name="interviewForm">
<div class="pr_setportfolio_content interview_div" ng-show="setinterview == true">
<div class="prterms_name_input" ng-repeat="interview in interview">
<span class="prterms_input_text">
{{interview.question}}
</span>
<textarea class="prterms_inputtextarea_name" ng-model="interview.answer" name="interview_answer" placeholder="Enter answer" msd-elastic auto-resize></textarea>
</div>
</div>
Try to use
ng-repeat="intview in interview"
<textarea class="prterms_inputtextarea_name" data-ng-model="intview.interview_answer" name="interview_answer" placeholder="Enter answer" msd-elastic auto-resize></textarea>
After submitting this form, just collect the answer interview.interview_answer is not null or undefined.
I am using angularjs to repeat radio button groups with the following code.
<div class="row observation-point"
ng-repeat="observationPoint in question.observationPointList">
<div class="col-md-6 col-sm-6">
<small>{{observationPoint.text}}</small>
</div>
<div class="col-md-4 col-sm-4 col-md-offset-2 col-sm-offset-2">
<label class="radio-inline">
<input type="radio" ng-disabled="observation.status != 'Open'"
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-1" ng-value="true"
ng-model="observationPoint.observed">{{'observation-domain.html.yes' | translate}} {{observationPoint.observed}}
</label>
<label class="radio-inline">
<input type="radio" ng-disabled="observation.status != 'Open'"
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
id="{{domain.id}}-{{question.id}}-{{observationPoint.id}}-0" ng-value="false"
ng-model="observationPoint.observer">{{'observation-domain.html.no' | translate}}
</label>
</div>
</div>
With angular 1.2.28 this worked fine, however we've recently upgraded to 1.4.2 and now the result is as in the picture below.
The model values are correctly saved and restored (see the true and false values in the image) in the variables, but only the last radio button in the ng-repeat is selected after reloading the page.
Why is this happening, because I really don't understand what the problem is and how to fix this.
nb. observationPoint.observer contains a boolean value not a string
EDIT: i've created a simplified plunker and of course this works as intended :S
http://plnkr.co/edit/tWjizHB8I5FNZVOgdq6J?p=preview
Which would suggest something is wrong with the naming or id's.
However when I check with the developer tools id and name seem fine
I've found a solution, if I change the dynamic names from
name="{{domain.id}}-{{question.id}}-{{observationPoint.id}}"
to
name="observationPoint_{{observationPoint.id}}"
it works without a hitch. I presume there is some sort of loading/timing issue going on. The variables are probably not unique at the moment the UI is rendered and causes only the last item to be set.
I have one checkbox list. I need to disable all elements which have model value set to false initially. But because of two way binding I have a problem when I deselect one checkbox it becomes disabled. How to solve it?
<div class="item-s" ng-repeat="element in model.elements">
<input id="element{{$index.toString()}}"
type="checkbox"
ng-true-value="true"
ng-false-value="false"
ng-model="element.value"
ng-disabled="!element.value" />
<label for="element{{$index.toString()}}">{{element.name}}</label>
</div>
Adding :: in front of a binding expression causes it to only be evaluated once. This should get you what you need:
ng-disabled="::!element.value"
Here's Angular's docs on one-time binding.
Try using ng-init:
<div id="myApp" ng-controller="MyController">
<div class="item-s" ng-repeat="element in model.elements">
<input id="element{{$index.toString()}}" type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="element.value" ng-init="initValue = element.value" ng-disabled="initValue==false" />
<label for="element{{$index.toString()}}">{{element.name}}</label>
</div>
</div>
Here is JSFiddle: http://jsfiddle.net/jz65o9tv/
In AngularJS, I'm trying to add/remove a checked class on a parent element, when its child radio button is checked/unchecked.
<label ng-class="{checked: menuType.isChecked0}">
<input type="radio" name="menuType" ng-model="menuType.isChecked0" />Text 1
</label>
<label ng-class="{checked: menuType.isChecked1}">
<input type="radio" name="menuType" ng-model="menuType.isChecked1" />Text 2
</label>
Here is a fiddle: http://jsfiddle.net/fAA2w/
There is no controller or any other relative code. If there is a better way to approach this, please share. This seems simple enough, but I cannot find an answer to this question. What am I doing wrong here?
You need to give the radio input a value.
For more examples see http://docs.angularjs.org/api/ng/input/input%5Bradio%5D.
<div ng-app>
<label ng-class="{checked: isChecked == 1}">
<input type="radio" name="menuType" ng-model="isChecked" value="1" />Text 1
</label>
<label ng-class="{checked: isChecked == 2}">
<input type="radio" name="menuType" ng-model="isChecked" value= "2" />Text
</label>
</div>
This is the correct way to be doing it. Reason being, when your ng-model changes, your ng-class will pick up on that and update the view, the Angular way!
I'm using ng-repeat to generate a bunch of radiobuttons.
<div class="radiobutton" ng-repeat="mylabel in field.labels">
<input
type="radio"
name="{{field['key']}}"
value="{{mylabel.label}}"
id="{{mylabel.name}}"
>
<label for="{{field['key']}}">
{{mylabel.label}}
</label>
</div>
I would like to add a class to the input-element based on if the input-element is checked or not, using angluar. As far as I can understand I should apply a ng-model to the element and then use that to declare a ng-class, but how do I make it so that each input get's it's own model-name?
try:
<div class="radiobutton" ng-repeat="mylabel in field.labels">
<input
type="radio"
name="{{field['key']}}"
value="{{mylabel.label}}"
id="{{mylabel.name}}"
ng-model='$parent.my_radio_button'
ng-class='{ class_name: (my_radio_button == mylabel.label) }'
>
<label for="{{field['key']}}">
{{mylabel.label}}
</label>
</div>
Since you use radio buttons, I guess only one can be selected, so you can share the same ng model.