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/
Related
In my angular app I'm using ng-repeat to generate several radio buttons, the ultimate goal is to add a choiceSelected class (ngClass colour styling) to the label of the clicked radio input. I can add the style to the clicked button, BUT that style is added to every other clicked radio button and I end up with 5 coloured labels. Can't understand why.
Here is the HTML code:
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio" name="optradio" ng-model="isChecked" ng-value="$index" ng-click="selectAnswer($index,questionObject)">{{obj.body}}</label>
</div>
</div>
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
/*********************************************/
ng-model="isChecked"
ng-value="$index"
/*********************************************/
ng-click="selectAnswer($index,questionObject)">{{obj.body}}
</label>
</div>
</div>
Look at the lines inside the comments, clearly tells that your value of the checkbox($index) is binding to the isChecked variable.
By your, condition in ng-class isChecked==$index it is same for all the elements and so the class is applied for all radio buttons.
if you can update the Json of questionObject , can give you alternative option.
Assuming that questionObject contains the following json
[{
"body": "abc"
}, {
"body": "def"
}, {
"body": "aghi"
} ]
You can use the below code to make your result achieve
<div class="row" ng-repeat="obj in questionObject track by $index" >
<div class="radio" >
<label class="choice"
ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
ng-value="obj.body"
ng-click="selectAnswer($index,obj)">
{{obj.body}}
</label>
</div>
The method selectAnswer should make your work simple. Use this
$scope.selectAnswer=function(number,obj)
{
$scope.isChecked=number;
}
LIVE DEMO
NOTE: In your code the selectAnswer method call in HTML passes the
questionObject fully
Update 1
Reason for manually defining isChecked
Angular looks for the the value of isChecked in the scope because you have used ng-class in the
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 !!!!
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!
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
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.