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.
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]">
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.
I have a checkbox and the value of this checkbox is fixed as 'A'. I want the checkbox selected if the model value matches with checkbox value attribute.
<div class="form-horizontal">
<label class="col-md-2">
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" value="A" /> Animal(s)
</label>
</div>
But using the above code, checkbox selection is not working automatically. How can I achieve this?
Please, try to use: ng-checked="ModelData.Animals == 'A'"
More information about ng-checked:
http://docs.angularjs.org/api/ng.directive:ngChecked
You need to use the ng-checked directive to check it with an expression.
Here is a working example: fiddle
I have a question:
if I use the checkboxes, I can choose only one value
plunk example
<input type="checkbox" ng-true-value="Korman Juriy" ng-false-value="" ng:model="query.name"/>
or
<input type="checkbox" ng-true-value="Ananchenko Juriy" ng-false-value="" ng:model="query.name"/>
how to get the two values together?
In this case, the best way is to create 2 diferent variables, like "name1" and "name2", instead "name" in both of the checkboxes.
So, in the first line
<input type="checkbox" ng-true-value="Korman Juriy" ng-false-value="" ng:model="query.name1"/>
<input type="checkbox" ng-true-value="Ananchenko Juriy" ng-false-value="" ng:model="query.name2"/>
Hope it helps your propose.
the best of the solutions that I have found:
jsfiddle.net/mattdwen/u5eBH/2/
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