asked on

angularjs detect change to class

Angularjs I am comparing 2 textboxes. is there a way to detect change in the class
If warning appears I want to be able to do something in my script.

form-controlAsset ng-valid ng-binding ng-isolate-scope ng-valid-min ng-valid-max ng-valid-fraction ng-dirty ng-valid-parse ng-touched

form-controlAsset ng-valid ng-binding ng-isolate-scope ng-valid-min ng-valid-max ng-valid-fraction ng-dirty ng-valid-parse ng-touched warning

Open in new window

Alexandre Simões

Wouldn't it be better to handle that on the component that adds the warning class?

If this is some sort of validation service it should have a way to grab an event from the $rootScope for instance.
If it you that manages this, then just broadcast a custom event so that other components can act on it.

Seven price

ASKER

ok. I tryied that doesn't seem to work. I think because I am using index and per column. the bigger picture is I want to have my button disabled if the class warning is detected in any column.
take a look.

$scope.showWarn = function(idx, field) {
        var inNet = $scope.rows[1][field];
        var inGross = $scope.rows[0][field];
        return  idx<2&&inNet>inGross;
}
<tbody>
    <tr ng-repeat="perform in rows" class="spacing">
        <td class="control-label" style=" white-space: nowrap;" ng-model="perform.ationDesc" ng-bind="perform.ationDesc">
            <input class="form-control" ng-model="perform.ationID" ng-disabled="true" ng-hide="true" type="text"></td>
        <td><input type="text" class="form-controlAsset" ng-class="{warning: showWarn($index,'uarter')}" ng-model="perform.uarter"   /></td>
        <td><input type="text" class="form-controlAsset" ng-class="{warning: showWarn($index,'YTD')}" ng-model="perform.YTD"     /></td>
        <td><input type="text" class="form-controlAsset" ng-class="{warning: showWarn($index,'Trail1Year')}" ng-model="perform.Trail1Year"  /></td>
        <td><input type="text" class="form-controlAsset" ng-class="{warning: showWarn($index,'Trail3Year')}" ng-model="perform.Trail3Year" maxlength="7" /></td>
        <td><input type="text" class="form-controlAsset" ng-class="{warning: showWarn($index,'Trail5Year')}" ng-model="perform.Trail5Year" /></td>
        <td><input type="text" class="form-controlAsset" ng-class="{warning: showWarn($index,'Trail10Year')}" ng-model="perform.Trail10Year"  /></td>
        <td><input type="text" class="form-controlAsset" ng-class="{warning: showWarn($index,'SinceInception')}" ng-model="perform.SinceInception" /></td>
    </tr>
</tbody>

<button ng-disable="if warning exists">submit</button>

Open in new window

Alexandre Simões

But you don't even need the events, you have the showWarn function.
It returns true/false right?
When it's true, do something else, whatever you need to do when the warning class is present.

You can even pass the repeater item (perform) to that function instead and "inject" a new property if what you want is to change something on the td itself

Seven price

ASKER

it works but lets say a user start inputing in the next row. the disabled button will become undisabled.
the reason it only detects each column not all columns.

ASKER CERTIFIED SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Seven price

ASKER

great thanks