javascript - AngularJS，当输入发生变化时在按钮上设置类

Question

我有一个输入字段，它是一个长列表的过滤器。输入字段旁边是一个搜索图标。基本上当用户开始输入时，我需要更改图标类。

我的文本字段设置如下：

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

在我的控制器内部，我定义了：

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

不太确定如何使用角度确定字段中是否有输入并更改类。我在这里采取了正确的方法吗？谢谢

Answer 1

您可以在 ng-model 上使用 ng-class

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

Answer 2

只需使用 ngClass。你的函数 $scope.change 应该返回类名，所以

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

你的控制器功能看起来像：

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