如何判断文本框是否为脏状态？无form标签时按需显示loader

Got it, let's tackle your two questions one by one:

1. Show the loader only when the input has content #

You can directly use ng-show (or ng-if) on the loader image, binding it to the ng-model value of your input. Since your input is bound to rpFilter.ResourcePlanID.value, we can check if this value exists to control the loader's visibility.

Here's the modified HTML:

<th style="width:90px"> 
  <span>ID</span>
  <!-- Only show loader when the input has non-empty content -->
  <img class="serverRP_ajax-loader" src="loader_green_32.gif" ng-show="rpFilter.ResourcePlanID.value" />
  <input type="text" id="abc" ng-model="rpFilter.ResourcePlanID.value" /> 
</th>

If you want to ignore whitespace (like empty spaces), you can adjust the condition to rpFilter.ResourcePlanID.value && rpFilter.ResourcePlanID.value.trim() to ensure only actual text triggers the loader.

2. Check if the input is dirty without a <form> tag #

Even without a surrounding form, AngularJS's ngModel directive creates a ngModelController for each input, which tracks the $dirty state (true if the user has modified the input from its original value). Here's how to access it:

Option 1: Use ng-init to get the ngModelController

Add ng-init to your input to capture the controller instance, then you can reference its $dirty property directly in your template or controller:

<input type="text" id="abc" ng-model="rpFilter.ResourcePlanID.value" ng-init="rpIdInputCtrl = $ctrl" />

• In your template: Use rpIdInputCtrl.$dirty to check if the input is dirty (e.g., <span ng-show="rpIdInputCtrl.$dirty">Input has been modified!</span>)
• In your controller: Access it via $scope.rpIdInputCtrl.$dirty to use the state in logic.

Option 2: Manually track the dirty state (simpler but less precise)

If you prefer a manual approach, define a boolean variable in your controller and update it on input changes with ng-change:

// In your controller
$scope.isIdInputDirty = false;

<input type="text" id="abc" ng-model="rpFilter.ResourcePlanID.value" ng-change="isIdInputDirty = true" />

Note: This method marks the input as dirty once any change is made, even if the user reverts back to the original value. The ngModelController approach is better because it will set $dirty back to false if the input returns to its initial state.

内容的提问来源于stack exchange，提问作者Ritesh Gore