相关疑难解决方法(0)

AngularJS - 如何添加多个ng-class指令?

以下是使用该ng-class指令的两种不同方法.我需要它们,在同一个元素上,但这不起作用.

在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)

在ng-class中使用表达式

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),只有第一个属性有效.

有什么建议?

javascript angularjs ng-class

20
推荐指数
2
解决办法
2万
查看次数

如何在angularjs中组合条件类和数据绑定类

要在不同表达式求值为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)

我想知道是否可以组合两种类型的模板,即; 有一个使用{}的条件类和一个使用[]的数据绑定类?

任何帮助将不胜感激.

提前致谢.

styles angularjs ng-class

5
推荐指数
1
解决办法
672
查看次数

如何使用角度中的 ng 类添加具有不同条件的多个类名?

我需要在特定条件下向元素添加 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)

因为在第一个条件下,过滤器为我返回类名。

javascript angularjs angularjs-directive

5
推荐指数
1
解决办法
563
查看次数

角度范围和ng-click/ng-show设置多个div

我正在寻找一些我迄今为止的代码的帮助.

主要目标是能够点击任何加号图标并让它覆盖所有其他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使用?

如何正确连接此示例的范围?

非常感谢.

我在这里设立了一个有效的FIDDLE.

在此输入图像描述

是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

5
推荐指数
1
解决办法
1871
查看次数