如何使用 String 语法和数组语法应用 ng-class？

Question

我是 angularjs 的初学者，我在 angularjs 的文档中读到 ng-class 可以用作 string 和 array 语法。所以我试图将 ng-class 应用于以下代码

(1) 使用字符串语法

<p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type here">

(2) 使用数组语法

<p ng-class="[style1, style2]">Using Array Syntax</p>
<input ng-model="style1"
       placeholder="Type here"><br>
<input ng-model="style2"
       placeholder="Type here"><br>

我正在尝试申请 css 喜欢

.style{
color:red;
}

.style1{
color:blue;
}
.style2{
font-size:30px;
}

但失败了。我不知道我在做什么 mistake.Any 感谢帮助。

Answer 1

您在输入中添加了 ng-model="style"。因此，无论您在输入中键入什么，都将成为 'p' 标记的 class，因为 ng-class="style"。

检查这个 fiddle http://jsfiddle.net/devjit/wdtk370z/4/

并在输入字段中键入 'style'、'style1'、'style2'。你会明白发生了什么。

<div ng-app>
 <p ng-class="style">Using String Syntax</p>
<input type="text" ng-model="style" placeholder="Type here"/>


<p ng-class="[style1, style2]">Using Array Syntax</p>
<input ng-model="style1"
placeholder="Type here"/><br/>
<input ng-model="style2"
placeholder="Type here"/><br/>

</div>

如何使用 String 语法和数组语法应用 ng-class？

How to apply ng-class using String syntax and array syntax?

angularjs

angularjs-directive

ng-class