Question

我正在尝试将条件类应用于页面中的许多元素（带有验证的表单），我想将五个可能的类中的一个应用于每个表单输入。当然，我可以为每个input元素执行类似的操作......

<input class="form-control" ng-model="form.input1" type="text" placeholder="Something here" ng-class="{class1: appliedClass('input1') == 1, class2: appliedClass('input1') == 2, class3: appliedClass('input1') == 3, class4: appliedClass('input1') == 4, class5: appliedClass('input1') == 5}" />

但对每个input元素执行此操作有点难看，如果我想添加第六个可能的类，我必须手动将其添加到每个input。

所以我想知道有没有办法应用控制器函数提供的类，谁会返回类名？

我找到了this，但它已经超过一年了，它似乎与我正在使用的版本无关。我试过ng-attr-class='controller_function_who_returns_a_class_name()'，它甚至没有评估函数。

有什么想法吗？

Answer 1

ng-class仍然可以满足您的需求。

这样的事情：

ng-class="controller_function_who_returns_a_class_name()"

e.g。

<强> HTML

<input type="text" ng-class="getClasses()">

<强>的Javascript

$scope.getClasses = function(input) {
  // evaluate input parameter against your conditions
  // then return the string of classes you wanted.
  return 'class1 class2 class3 class4';
};

Answer 2

是的，你可以！检查一下 - 它涉及自己创建一个控制器函数，但你可以使用object属性来分配类，如下所示：

$scope.getClassForInput = function () {
    //Function body that returns the class name
};

然后在您的视图中，您可以将其用作：

<input type="text" ng-class="{'true': getClassForInput()}['true']">

注意如何使用索引'true'来获取分配给“true”属性的类。 ng-class要么需要表达式，要么也可以直接传递类名，如本例所示

编辑：Fiddle演示相同的

应用没有ng-class的类？

2 个答案: