在角度js中动态地将类添加到div

I have a div like this

我有这样的div

<div ng-model="star"></div>

I want to add a class 'active' to this div in angular js. I tried like this in my angular js controller

我想在角度js中为这个div添加一个类'active'。我在我的角度js控制器中尝试过这样的

$scope.star.addClass('active');

But,I am getting error. I am new to angular js. please help me...

但是,我收到了错误。我是棱角分明的新手。请帮我...

3 个解决方案

#1

Try this:

<div ng-class="{ active: star == 'yes', 'in-active': star == 'no' }" ng-bind="star"></div>

You can have one or more classes assigned based on the expression (true or false). If a class name has a hyphen, enclose in single quote. This is a better approach and preferred than changing in controller. Also, because this is a div, you have to do ng-bind, not ng-model. ng-model works on fields like input.

您可以根据表达式(true或false)分配一个或多个类。如果类名具有连字符,请用单引号括起来。这是一种更好的方法,比控制器中的更改更受欢迎。另外,因为这是一个div,你必须做ng-bind,而不是ng-model。 ng-model适用于输入等字段。

UPDATE:

Since you insist on changing the class in code, here it is:

由于您坚持在代码中更改类,因此它是:

$("div[ng-bind='star']").addClass('active');

#2

If you want to access change class dynamically then you can put watch on your star variable in your controller like below :

如果您想动态访问更改类,那么您可以将监视器放在控制器中的星形变量上,如下所示:

$.watch('star',function(newVal, oldVal){ 
  // put your code to here based on new value and old value
  // you can add class to your div like :
  // angular.element("div[ng-bind='star']").addClass('active');
});

#3

Using a variable to control your class

使用变量来控制你的类

<div ng-class="customClass"></div>

in controller

$scope.customClass = 'active custom-class1';

so, you can use if-else to change class name

所以,您可以使用if-else来更改类名

if (something) {
    $scope.customClass = 'active custom-class1';
} else {
    $scope.customClass = 'deactive custom-class2';
}

#1