AngularJS, set class on button when input has change

Question

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

Ven · Accepted Answer · 2013-03-08 23:29:33Z

4

You can use ng-class on your ng-model

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

answered Mar 8, 2013 at 23:29

Ven

19k2 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ronnie Over a year ago

Sorry, to be more clear. The class is initially a search icon and I need the class to turn into icon-refresh. I think I figured it out though, its <i class="icon-search" ng-class="{'icon-refresh': query.length}"></i> thank you!

odiseo · Accepted Answer · 2013-03-08 23:33:59Z

1

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";
    }
};

answered Mar 8, 2013 at 23:33

odiseo

6,7842 gold badges22 silver badges21 bronze badges

1 Comment

Adriaan Davel Over a year ago

When would the change() method be invoked? Only the first time the UI is rendered?

Collectives™ on Stack Overflow

AngularJS, set class on button when input has change

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related