CODEWITHSUNDEEP
javascriptangularjs
Ronnie
Ronnie

Reputation: 11198

AngularJS, set class on button when input has change

I have an input field that is a filter for a long list. Next to the input field is a search icon. Basically when the user starts typing, I need to change the icon class.

I have my text field setup like so:

<input type="text" ng-change="change()" ng-model="query" />
<button class="btn"><i class="icon-search"></i></button>

Inside my controller I have defined:

$scope.change = function()
{
    //change the class of button based on the length of the input field     
}

Not really sure how I go about determining if there is input in the field using angular and changing the class. Am I taking the right approach here? Thanks

Upvotes: 2

Views: 4419

Answers (2)

odiseo
odiseo

Reputation: 6784

Just use ngClass. Your function $scope.change should return the class name, so

<button ng-class="change()"><i class="icon-search"></i></button>

and your controller function would look something like:

$scope.change = function() {
    if(something){
        return "classA";
    }
    else{
        return "classB";
    }
};

Upvotes: 1

Ven
Ven

Reputation: 19040

You can use ng-class on your ng-model

<i ng-class="{'icon-search': query.length}"></i>

Upvotes: 4

Related Questions