在元素ng-repeat上输出类名数组

时间:2022-11-25 16:14:27

I have array of class names that I want to attach to an element for example..

我有我想要附加到元素的类名数组。

Tags = [tag1, tag2, tag3] ;
<article ng-class="tag1, tag2, tag3"></article>

is there any way I can use a for loop on the ng-class to output this array onto the element..

有什么方法可以在ng类上使用for循环来将这个数组输出到元素上。

Thanks

谢谢

1 个解决方案

#1


3  

ng-class can take array itself so provided Tags is a property of the scope you could do:-

ng-class可以使用数组本身,因此提供的标记是您可以执行的范围的属性:-

 <article ng-class="Tags"></article>

ng-class

ng-class

Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

表达式eval。计算结果可以是一个字符串,表示分隔类名的空间、数组或类名到布尔值的映射。对于映射,值为truthy的属性的名称将作为css类添加到元素中。

Demo

演示

angular.module('app', []).controller('ctrl', function($scope){
    $scope.Tags = ['tag1', 'tag2', 'tag3'];
});
.tag1.tag2.tag3{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <article ng-class="Tags">Article</article>
</div>

#1


3  

ng-class can take array itself so provided Tags is a property of the scope you could do:-

ng-class可以使用数组本身,因此提供的标记是您可以执行的范围的属性:-

 <article ng-class="Tags"></article>

ng-class

ng-class

Expression to eval. The result of the evaluation can be a string representing space delimited class names, an array, or a map of class names to boolean values. In the case of a map, the names of the properties whose values are truthy will be added as css classes to the element.

表达式eval。计算结果可以是一个字符串,表示分隔类名的空间、数组或类名到布尔值的映射。对于映射,值为truthy的属性的名称将作为css类添加到元素中。

Demo

演示

angular.module('app', []).controller('ctrl', function($scope){
    $scope.Tags = ['tag1', 'tag2', 'tag3'];
});
.tag1.tag2.tag3{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <article ng-class="Tags">Article</article>
</div>