Addclass if search field is relevant: Angularjs

I have a search input box and a list box,

    <input type="text"  class="inputSearch" placeholder="Search" ng-model="searchRoleOne"/>
    <i class="fa fa-search"></i>                                                         
    <select multiple class="listMutiple top5" ng-model="selectedRoleValue">
        <option ng-selected="selectrole" ng-repeat="role in roles | filter:searchRoleOne" value="{{role}}">{{role}}</option>      
    </select>

      

I need to add addclass

    .addClear{
        background: url(../images/Close.png) no-repeat right -10px center;
        background-repeat: no-repeat;
        background-position: right 5px center;
    }

      

whenever there is text, I have to happen to the change function. And when clicking the search box .addClear the class should be empty as well as ng-model.

How can i do this?

I tried using ng-class="{'addClear': searchRoleOne}"

the search box. It is not working properly.

+3


source to share


2 answers


Just you can try with this

Fiddle here



ng-class="{'addClear': searchRoleOne.length > 0}"

      

Hope this helps you.

+5


source


Try

ng-class="{addClear: searchRoleOne.length}"

      



This should work, see fiddle http://jsfiddle.net/HB7LU/5613/

which version of angular are you using?

+3


source







All Articles