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>
Related
I have an input box and my model is undefined for somereason when I try to access it in controller.
Below is the input box
<input type="text" ng-if="primaryOperator == 'Age'"
ng-model="primaryValueData" placeholder="enter Value"
class="hideOutlineClass" />
when i try to access $scope.primaryValueData in controller it is undefined. I cannot use ng-show have to use ng-if. Any help is appreciated
Try like this,
<div ng-if="primaryOperator === 'Age'">
<input type="text"
ng-model="primaryValueData" placeholder="enter Value"
class="hideOutlineClass" />
</div>
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>
I have defined an input feild as
<form name="signUpForm">
<input type="text" name="username" ng-minlength="8" ng-maxlength="64" ng-model="user.username" ng-pattern="/((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%^]))/">
</form>
And defined user in controller as
$scope.user{};
Now when I bind user.username value in HTML, its preventing it.
<p ng-if="user.username.length > 0">Display True</p>
Even if I simply bind its value in HTML as
{{user.username}}
Its not being displayed.
Now if I remove ng-pattern from input field as :-
<input type="text" ng-minlength="8" ng-maxlength="64" ng-model="user.username">
then only its binding and that too after satisfying ng-minlength="8" condition. Means '12345678' is displayed and '1234567' not.
One more issue is there i.e. if I use ng-pattern then ng-minlength validation is not working.
<p ng-if="signUpForm.username.$error.minlength">Please enter minimum length</p>
You can try setting the form.$setViewValue.length instead of the model's length
for example:
<p ng-if="signUpForm.username.$setViewValue.length > 0">Display True</p>
here's a solution i found:
How do I prevent AngularJS from unbinding a form input's value from its model when it's invalid?
I want to add to the following:
<input type="radio" ng-name='{{quest.id}}' ng-model='$parent.$parent.choice.input' ng-value='{{option}}' id='{{quest.id}}-{{option.id}}' ng-required='required'>
An attribute: ng-checked='checklast'
only if some condition is true,how do i do that?
just an example
<input type="radio" ng-checked="testModel.child_1 && testModel.child_2" ng-model="isChecked"/>
EDIT
if you using ng-repeat for displaying the list of radio then
<input type="radio" ng-name='{{quest.id}}' ng-model='$parent.$parent.choice.input' ng-value='{{option}}' id='{{quest.id}}-{{option.id}}' ng-required='required' ng-checked="$index == $last">
I have to use the directive ng-required, but I cannot hardcode true or false. I need to use it in a variable, but angular does not recognize the "true".
jsFiddle example
<div ng-app ng-init="test=true">
<div>
both have ng-required="true"
<br/>
one as hardcoded string literal, one via a variable
<br/>
Inspect them, one is not required!
</div>
<form name="myForm">
<input type="text" ng-required="{{test}}" />
<input type="text" ng-required="true" />
</form>
</div>
How can I get this working?
<input type="text" ng-required="{{test}}" />
You don't need to interpolate test here. Since you want to evaluate the value of test, just remove the curly braces and it should work.
Just discovered yesterday you can use ng-required in the same pattern as ng-class:
<input type = "text" ng-required = "{true : 'true', false : 'false'}[test]" />
Personally I use ternary operators into these kind of directives, and it works well. For the ng-required :
<input type="text" ng-required="(user.name == '' ? 'true' : 'false')" ng-model="user.nickname"/>
In this example, if the name field of the user is not filled, the nickname field become REQUIRED.
for some reason, both answers does not work, just use
ng-required="expired"
with expired to be a variable.