how to check the text box is dirty or not

Question

Hi following is my html code

 <th style="width:90px">
 <span>ID</span><img class="serverRP_ajax-loader" src="loader_green_32.gif" /><input type="text"  id="abc" ng-model="rpFilter.ResourcePlanID.value" />                           
                    </th>

I want to enable loader_green_32.gif only when there is some value enter in abc textbox. $dirty is not possible because I am not using form tag

Answer 1

You can add ng-if="rpFilter.ResourcePlanID.value" to the image tag.

This will make that image visible only if you enter the value in textbox.

<th style="width:90px">
 <span>ID</span>
 <img ng-if="rpFilter.ResourcePlanID.value" class="serverRP_ajax-loader" src="loader_green_32.gif" />
 <input type="text"  id="abc" ng-model="rpFilter.ResourcePlanID.value" />
</th>

Here is a working EXAMPLE

Note: If you want to just check whether field is modified or not, then you need to use $dirty and for that you have to definitely take formtag

Here is how it goes,

You should use name of attribute,

ng-if="myForm.resourceplanid.$dirty"

<form name="myForm">
    <th style="width:90px">
    <span>ID</span>
    <img ng-if="myForm.resourceplanid.$dirty" class="serverRP_ajax-loader" src="loader_green_32.gif" />
    <input type="text" name="resourceplanid" id="abc" ng-model="rpFilter.ResourcePlanID.value" />
    </th>
</form>

Answer 2

<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>
You could also use ng-hide="somefield.length" instead of ng-show="!somefield.length" if that reads more naturally for you.

A better alternative might be to really take advantage of the form abilities of Angular:

<form name="myform">
  <input name="myfield" ng-model="somefield" ng-minlength="5" required>
  <span ng-show="myform.myfield.$error.required">Please enter something!</span>
  <span ng-show="!myform.myfield.$error.required">Good boy!</span>
</form>