Question

我使用yeoman角度生成器来支撑我的应用程序，现在我正在处理特定的视图。

我正在构建一个简单的ng-repeat函数，以便清理我的html并避免重复相同的标记4次。

我正在制作内容面板，并希望添加一个特定于内容的类，所以我可以用Sass来设置它。我尝试使用ng-class，但到目前为止，我一直无法使用它。

我是AngularJS的新手，我尝试阅读official ng-class documentation和this writeup，但到目前为止，我无法使其正常工作。我想这需要一段时间才能适应Angular。

这是我的观点：

<div data-ng-controller="LandingController">
    <div ng-repeat="panel in panels">
        <div class="panel-heading">
            {{ panel.title }}
        </div>
        <div class="panel-content" ng-class="{{panel.contentClass}}" data-ng-bind-html="panel.content">
        </div>
    </div>
</div>

和控制器：

'use strict';

angular.module('angularApp')
    .controller('LandingController', function ($scope) {
        $scope.panels = [
            {
                title: 'lokacija',
                contentClass: 'location',
                content:'<p>Institut Jožef Stefan<br>Jamova 30<br>1000 Ljubljana</p><br><div class="map-container"></div>'
            },
            {
                title: 'kontakt',
                contentClass: 'location',
                content: ''
            },
            {
                title: 'delovni čas',
                contentClass: 'location',
                content: ''
            },
            {
                title: 'katalog',
                contentClass: 'location',
                content: ''
            }
        ];
    });

Answer 1

ng-class以三种不同的方式运作，具体取决于表达式评估的三种类型中的哪一种：

如果表达式求值为字符串，则该字符串应为一个或多个以空格分隔的类名。（这将与您的案例匹配）
如果表达式求值为一个对象，则对于具有truthy值的对象的每个键值对，相应的键将用作类名。（EX：＆＃39; {{ 1}}）
如果表达式求值为数组，则数组的每个元素应该是类型1中的字符串，或类型2中的对象。这意味着您可以将数组中的字符串和对象混合在一起让您更好地控制CSS类出现的内容。请参阅下面的代码以获取此示例。 ng-class="{'my-class': (true/false expression)}"推荐课程文档，您将获得更多信息。

所以你可以直接使用(EX: ng-class="[style1, style2, style3]")，这将与第一个列表项{女} ng-class="panel.contentClass"匹配。

您只需将If the expression evaluates to a string, the string should be one or more space-delimited class names.更改为ng-class="{{panel.contentClass}}"，因为ng-class="panel.contentClass"接受ng-class而不是内插值。

expression

DEMO

Answer 2

您正在以错误的方式使用ng-class。 ng-class用于有条件地动态添加/删除类。

Here是ng-class的完整文档。

ng-class需要json，其中键是类名，值是条件。如果值满足，则不添加该类。

代表

<div class="panel-content, {{panel.contentClass}}" data-ng-bind-html="panel.content">

如果panel.contentClass的值为true，则添加my-class。

如果您从panel.contentClass获取类名，那么更好的方法是仅使用类属性而不是ng-class。 Here是参考。

对于前。

{{1}}

使用ng-class添加其他类

2 个答案: