How can I put condition on checked property of checkbox?
I have checkboxes for each row in my application. In my database, I have a column 'IsSaved' whose value is either 0 or 1. If IsSaved for a row is 1 then checkbox should automatically be shown as selected.
Here's my code snippet:
<td style="text-align:center;">
<input type="checkbox" name="select" value="${ID}" ng-checked="${IsSaved} ? true : false" />
</td>
How can I achieve this?
You can access variables of your scope directly by calling it by its variable name: IsSaved.
You are using a ternary expression, this however is not supported as described here.
Now you can use a shorter expression for this: IsSaved == 1, which just results in a truthy or falsy result.
So you get
<input type="checkbox" name="select" id="{{ID}}" ng-checked="IsSaved == 1" />
Note: that ID variable can be accessed in the scope by the double braces.
JsFiddle
<input type="checkbox" name="select" value="ID" ng-checked="(IsSaved) ? true : false" />
I'm assuming that IsSaved is a $scope variable in your controller that has scope over your HTML template
This should work
Hi Siddharath Please try the bellow. This this work for me.
<td style="text-align:center;">
<input type="checkbox" name="select" value="{{ID}}" ng-checked="{{IsSaved}}" />
</td>
Related
how to Checked value from $index base. suppose in textboxStart Index and TextboxEnd . when user enter Start index 5 and End Index 10 , checkbox automatically checked, from 5 To 10 Index. please help me
<tr ng-repeat="item in MyList">
<td>{{$index}}</td>
<td>
<label class="mdl-checkbox mdl-js-checkbox" for="checkbox33">
<input autocomplete="off" ng-model="item.checked"
type="checkbox" id="checkbox33"
class="mdl-checkbox__input" unchecked>
{{CheckItems()}}
</label>
<td>{{item.Name}}</td>
<td>{{item.PilgrimID}}</td>
<td>{{item.GroupName}}</td>
<td>{{item.PassportNo}}</td>
<td>{{item.Gender}}</td>
<td>{{item.SubAgentName}}</td>
Use the ng-change directive to specify an update function:
<div>Input Start
<input ng-model="inputStart" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
<div>Input End
<input ng-model="inputEnd" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
Then update the selections:
$scope.updateSelections = function(iStart, iEnd) {
$scope.MyList.forEach((x,index)=>item.checked = (iStart<=index && index<=iEnd));
};
just push the selected values in an array , selectedItemIndexes like ng-checked="selectedItemIndexes.includes($index)"
https://stackblitz.com/edit/angularjs-snavdn
you can do it by adding one property like ItemIndex in your ItemList model,
and by putting input box with display none you can get index value in ItemList and can do what you want from javascript side,
<td><input type="text" style="display:none;" ng-model="item.ItemIndex"
ng-value="$index"/>{{$index}}
</td>
I want to have false value when user checkbox is not checked.
HTML Code
On checking the checkbox value is setting as 'true' in addUser.isAllOrgSelected. But when checkbox is not checked value is not getting set to 'false'.
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox"
ng-true-value="true" ng-false-value="false" ng-
model="addUser.isAllOrgSelected">
<label for="checkbox-1-1"></label>
<span class="check-text">ALL</span>
you can use the ng-checked directive.
<input type="checkbox"
ng-model="addUser.isAllOrgSelected"
ng-true-value="true"
ng-false-value="false"
ng-checked="addUser.isAllOrgSelected " />
see example here
https://jsfiddle.net/bngk/7urrobaa/
<div ng-repeat="item in items" ng-init="item.showCb = item.value == 'true' || item.value == 'false'">
<input type="checkbox" ng-if="item.showCb" ng-true-value="true" ng-false-value="false" ng-model="item.value" ng-checked="item.value == 'true'">{{items[$index].value}}</input>
<input type="text" ng-if="!item.showCb" ng-model="item.value"/>
</div>
I have problem in binding the checkboxes in ng-repeat if I have few checked values by default where the values are not properly updated in the model and if all are non-checked by default, it works but the value is updated in the model, it holds boolean value though i mentioned ng-true-value="true" and ng-false-value="false" as string. I want the string value to be present in the model. Please check in my fiddle. Thanks for your support.
If you have a look at the documentation: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D, you can see ng-*-value accepts an expression. So if you simply put ng-true-value="true", it sees that true as an expression.
If you put ng-true-value=" 'true' ", then it knows it is a string.
But as mentioned above, there are a couple of other mistakes in your code.
I'm looking for a way to condition a ng-readonly inside an ng-if statement.. i tried it in a few way, this is my latest vesion..
ng-if="note.owner_image === user.image " ng-readonly="false"
need some assistant..
<textarea
class="wm-textarea-notes"
ng-model="noteEdit.note_value"
columns="1"
placeholder="Add a note"
ng-readonly="true"
ng-if="note.owner_image === user.image " ng-readonly="false"
ng-if="note.owner_image === "" " ng-readonly="false
></textarea>
ng-if is used to hide or show the element based on the condition given.
if you want the condition to apply to ng-readonly, you should put it in the ng-readonly attribute:
<textarea
class="wm-textarea-notes"
ng-model="noteEdit.note_value"
columns="1"
placeholder="Add a note"
ng-readonly="note.owner_image !== user.image || note.owner_image !== ''">
</textarea>
That's not what ng-if does. It just creates or removes the element based upon the value.
What you want is to have a scope method that makes those tests, let's call it isReadOnly and have your textarea like this:
<textarea
class="wm-textarea-notes"
ng-model="noteEdit.note_value"
columns="1"
placeholder="Add a note"
ng-readonly="isReadOnly()"></textarea>
So, somewhere in your controller you have to create that method that will return true or false for that textarea to determine its status.
In latest angular (6/7), you can simply set it using readonly
<mat-form-field>
<input matInput readonly="true" placeholder="{{placeholder}}" value="{{value}}">
</mat-form-field>
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