This works (the button is checked by default):
<input type="radio" name="xyz" ng-model="formData.foo" ng-checked="true" value="bar">
This doesn't work (the button is not checked by default):
<input uniform type="radio" name="xyz" ng-model="formData.foo" ng-checked="true" value="bar">
What's the problem?
EDIT:
This works (changed ng-checked to checked):
<input uniform type="radio" name="xyz" ng-model="formData.foo" checked="true" value="bar">
Is this a proper way of doing things like this?
EDIT2:
I'd prefer to have the ng-checked attribute, as this would allow me to evaluate expressions.
You have to check radio inside the controller.
$scope.formData.foo = 'bar';
According to AngularJS docs, ng-checked argument is not applicable on radio type input tag.
Related
I have a list retuned from MVC controller to angular controller as follows:
result.data.mylist = (<Test1, true>,<Test2, false>,<Test3, true>)
I have 3 controls*textboxes) that always sit on a form , TextBox1, TextBox2, TextBox3.
I want to only show the textbox where the value is true.
So in the above , since Test1 = true (TextBox1 is visible) and TextBox3 is visible since Test3 is true.
I can do it if it was a simple binding but how do i even start this in AngularJS ?
Use Angular's built-in *ngIf directive.
For example,
<input type="checkbox" *ngIf="result.data.mylist[0]">
<input type="checkbox" *ngIf="result.data.mylist[1]">
<input type="checkbox" *ngIf="result.data.mylist[2]">
Assuming that result.data.mylist is an array containing boolean values.
Alternatively, you could disable them using,
<input type="checkbox" [disabled]="result.data.mylist[0]">
<input type="checkbox" [disabled]="result.data.mylist[1]">
<input type="checkbox" [disabled]="result.data.mylist[2]">
I'm generating a group of radio buttons options from a JSON object which is requested when another radio button is selected. This works as expected but the form validation is not working correctly since the form only becomes valid if all the options in the radio button group are first clicked.
My mark-up for the radio button:
<div data-ng-repeat="option in options" class="radio">
<label>
<input type="radio" name="decline_type_id" ng-model="decline_type_id" value="{{option.id}}" ng-required="!decline_type_id" />
<strong>{{option.name}}</strong>
</label>
</div>
Here is my plunker:
https://plnkr.co/edit/B7KgUt4GMrnSATYIQuN5?p=preview
The same mark-up without the loop works as expected, so I don't understand what it is about the loop used to generate the list that is breaking the validation of the form until all options are selected?
This is a Angular scoping issue. The ng-model inside the ng-repeat is using a child scope.
The ng-model="decline_type_id" was unique for each iteration of the loop. So ng-required check was for each unique model.
You can make use of $parent scope to do the ng-required checking on a shared variable instead.
<input type="radio" ng-model="$parent.decline_type_id" value="{{option.id}}" ng-required="!$parent.decline_type_id" />
I have a checkbox that needs to be shown as selected depending on a function result instead of binding it to an object property.
This would be easy, but is not possible:
<input type="checkbox" ([ngModel])="category.selected">
And this does not work, as even checked="false" results in a checkbox being displshownayed as selected:
<input type="checkbox" [attr.checked]="isCategorySelected(category.id)"/>
I need an outcome like this
<input type="checkbox">
<input type="checkbox" checked>
depending on the result isCategorySelected(id).
Any help is appreciated.
You cannot use [(ngModel)] in this scenario because it defines a 2-way databind, and you are passing a function.
Instead, you could simple use [ngModel], like the snippet below. This syntax defines a one-way databind.
<input type="checkbox" [ngModel]="yourBooleanFunction()"/>
You can read more about ngModel here.
Let me know if you have any other problem with it.
I am generating a bunch of radio buttons using ng-repeat, and then trying to update a model when one of them is selected. This doesn't appear to be working.
The same markup works just fine when the radio inputs are hardcoded as opposed to being generated by ng-repeat.
This works:
<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">
{{lunch}}
This doesn't:
<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">
{{lunch}}
See jsfiddle showing both here: http://jsfiddle.net/mark_up/A2qCS/1/
Any help would be appreciated.
Thanks
<div ng-controller="DynamicCtrl">
<input type="radio" ng-model="$parent.lunch" ng-repeat="m in meat"
ng-value="m" name="lunch">
{{lunch}}
</div>
Should do the trick.
As I understand it, ng-repeat creates its own $scope. so you need to refer to the $parent $scope; Yes, AngularJS is tricky. Also you need to change the value to ng-value too.
the above issue was discussed here
That happens because ng-repeat creates a new scope. Basically, each <input> is creating a selectedOption value on its own inner scope. To work around that, create a new container object for that value. For example, you could declare in your controller:
$scope.data = {selectedOption: x};
And then in your template, use ng-model="data.selectedOption"
in this way, ng-model gets updated .. :)
this is tricky
Just need to replace value with ng-value
How do a force a a radio box to be be checked value in jquery mobile?
I think it has to do with class=ui-btn-active.
<input type='radio' name='myradio' id='radio-choice-1' value='1' /><label for='radio-choice-1'>Station 1</label>
<input type='radio' name='myradio' id='radio-choice-2' checked value='2' /><label for='radio-choice-2'>Station 2</label>
<input type='radio' name='myradio' id='radio-choice-3' value='3' /><label for='radio-choice-3'>Station 3</label>
I'm not sure what you mean by 'force' - are you asking how to programatically change the state of a radio button? With jQuery Mobile, you must refresh the radio button after updating it's attribute in order for it's UI to be updated. From the docs:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Also note that with HTML4, boolean attributes such as disabled and checked take their names as values when enabled. So simply putting in checked is not valid but must be checked='checked' instead.