以下是使用该ng-class指令的两种不同方法.我需要它们,在同一个元素上,但这不起作用.
http://plnkr.co/edit/uZNK7I?p=preview
<div ng-repeat="item in [1, 2, 3, 4, 5]"
ng-class="{ first: $first, last: $last }">{{item}}</div>
Run Code Online (Sandbox Code Playgroud)
正确的结果
<div class="first">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="last">5</div>
Run Code Online (Sandbox Code Playgroud)
http://plnkr.co/edit/tp6lgR?p=preview
<div ng-repeat="item in [1, 2, 3, 4, 5]"
ng-class=" 'count-' + ($index + 1) ">{{item}}</div>
Run Code Online (Sandbox Code Playgroud)
正确的结果
<div class="count-1">1</div>
<div class="count-2">2</div>
<div class="count-3">3</div>
<div class="count-4">4</div>
<div class="count-5">5</div>
Run Code Online (Sandbox Code Playgroud)
我需要动态类名(如'count-' + n),但也需要多个类的对象语法.
我不能只使用2个ng-class属性(http://plnkr.co/edit/OLaYke?p=preview),只有第一个属性有效.
有什么建议?
要在不同表达式求值为true时应用不同的类:
<div ng-class="{'class1' : expression1, 'class2' : expression2}">
Hello World!
</div>
Run Code Online (Sandbox Code Playgroud)
使用[]为数据绑定类应用不同的类
<div ng-class="[class3, class4]">
Hello World!
</div>
Run Code Online (Sandbox Code Playgroud)
我想知道是否可以组合两种类型的模板,即; 有一个使用{}的条件类和一个使用[]的数据绑定类?
任何帮助将不胜感激.
提前致谢.
我需要在特定条件下向元素添加 2 个类名:
ng-class="(commentItem.comment | escapeHtml | direction)"
Run Code Online (Sandbox Code Playgroud)
适用于第一个,使用“escapeHtml”过滤器获取给定 html 字符串的文本内容,然后使用“direction”过滤器获取文本的方向。现在我需要通过这种方式向同一个元素添加另一个类:
ng-class="{'hidden': commentItem.isEditing}"
Run Code Online (Sandbox Code Playgroud)
如何将它们混合在一个 ngClass 指令中?
注意
我认为不可能使用
{"exp1": condition1, "exp2": condition2}
Run Code Online (Sandbox Code Playgroud)
因为在第一个条件下,过滤器为我返回类名。
我正在寻找一些我迄今为止的代码的帮助.
主要目标是能够点击任何加号图标并让它覆盖所有其他div块.
当点击加号图标时,它也会在右侧显示一个div块.
正如您将看到单击块2时所做的那样.
当点击任何加号图标时,我正在寻找一种有效的方法来使用Angular.
这只是我在这里展示的一个小样本,实际上可以覆盖10到20个块.
如果有人能够在这里看到使用更少代码的方法并更好地利用范围,那将非常感激.
试过这个,但它不想工作......
data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"
Run Code Online (Sandbox Code Playgroud)
如果我不得不使用这种类型的选项,甚至说10块,那将是一个真正的混乱.
主要问题
是否有更好的Angular方式可以使用...当点击任何加号图标时,它会更改范围,然后由ngclass和ng-show使用?
如何正确连接此示例的范围?
非常感谢.
这是Avijit Gupta的最终工作示例.
<div class="container" ng-app="plusMinusApp" ng-controller="plusMinusController">
<div class="row" ng-init="value1 = 'off'">
<!--<div class="col-xs-4" data-ng-class="{coverThisBlock: value2 == 'off',coverThisBlock: value == 'on'}"> -->
<div class="col-sm-4 col-xs-6" data-ng-class="{coverThisBlock: value2 == 'off'}">
<div class="divClass"
data-ng-click="(selectBlock(1)) ; (status1 = !status1) ; (value1 = { 'on': 'off', 'off':'on'}[value1])"
data-ng-class="{'active-selection': …Run Code Online (Sandbox Code Playgroud) angularjs angularjs-scope angularjs-ng-click ng-show ng-class