ng-class 在 h1 中不能正常工作？

Question

我开始学习 AngularJs 我想知道为什么我的代码不起作用？我想知道为什么 h1 标签没有随着 ng-class="'orange'".

变成橙色

我知道答案可能很简单，但我才刚刚开始。

这是我的 index.html:

<html ng-app="app">
    <head>
        <style type="text/css">
        </style>

    </head>
    <body>

        <div ng-controller="MainController">
            <h1 ng-class="'orange'">Hello There</h1>
        </div>


        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

这是我的 app.js:

var app = angular.module('app', []);

app.controller('MainController', function($scope) {

})

P.s。控制台中没有错误。

Answer 1

一定有用。因为作为结果，您将 class 作为直接 string 变量，其值是 orange 带单引号。

这与您定义的作用域变量相同，它从 as

返回值

<h1 ng-class="class">Hello There</h1>

代码

$scope.class='orange';

这两种方法是一回事。

更新

您需要添加 css class 才能获得这些更改

<style type="text/css">
  .orange {
     color: orange;
  }
</style>

Demo Plunkr

Answer 2

ng-class 用于动态或范围相关的 class，如果你想要静态 class 只需使用 class。我看到了你的评论，它不会以任何方式取代任何 CSS。它只是一种动态交换 css classes.

的方法

您可以通过多种方式使用它，例如：

<h1 ng-class="class">Hello There</h1>

并在控制器中

$scope.class='orange';

或有条件：

<h1 ng-class="{'danger' : condition}"><Hi</h1>

或 tenaric 如果：

 <h1 ng-class=" condition? 'danger' : 'warning'">Hi</h1>

natuarlly 条件在范围内定义，'' 项是 class要添加的内容

ng-class 在 h1 中不能正常工作？

ng-class not properly working inside h1?

html

javascript

css

angularjs

angularjs-ng-class