如何根据html内容使用ng类-AngularJS

How to use ng-class according to the html content - AngularJS

本文关键字：ng -AngularJS 何根 html      更新时间：2023-09-26

我使用ng-repeat将数组中的每个元素打印为HTML段落。

<p ng-repeat="item in queries track by $index">{{ item }}</p>

结果是：

------------ title 1 --------------
content 1
------------ title 2 --------------
content 2
------------ title 3 --------------
content 3
------------ title 4 --------------
content 4

问题是我似乎不知道如何自定义样式的段落（例如color:red;）。

添加ng类属性

<p  ng-repeat="item in queries track by $index" 
              ng-class={someCustomClass: item.title} >{{ item }}</p>

如果以上不起作用，那么这应该是

<p  ng-repeat="item in queries track by $index" 
            ng-class={someCustomClass: Boolean(item.title) } >{{ item }}</p>

如果我错了，这个想法是为ng类提供一个对象文字，其中键是类名，值是应用类的条件

因此ng-class={ theClassNameToUse: TheCondition }

如果您想使用ng类，可以使用以下语法：

ng-class="{'class-name': item.indexOf('title') >= 0}"

或者，你可以使用这样的ng样式：

ng-style="setColor(item)"

具有以下功能：

$scope.setColor = function (item) {
    if (item.indexOf("title") >= 0) {
        return { color: red };
    }
}

这样的东西就可以了：

<p  ng-repeat="item in queries track by $index" 
    ng-attr-style="{{ item.indexOf('title') != -1 ? 'color: red' : '' }}">{{ item }}</p>
相关文章：