问题标签 [ng-class]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
401 浏览

javascript - AngularJS 1st ng-class 作品 2nd 没有

我有以下内容:

在( ng-include src="'views/sidebar.html'" )^ 我有以下 div 和 ng-click 触发showSidebar的变化

$scope.showSidebar = true; resultsController中,当调用ng-click时,DIV1 上的 ng-class 生效,但在 DIV2 上不生效。

有任何想法吗?

0 投票
2 回答
943 浏览

javascript - 包含值和条件的复杂 ng 类表达式

假设我想让 ng-class 做两件事:

1)像这样从变量中填充一个值

2)有条件地设置一个预定义的类:

我知道我可以做类似的事情 class="{{myAwesomeJavaScriptVariable}}" ng-class="{awesomeClass: myAwesomeBoolean}"

我如何(如果可能的话)将这两者合并成一个 ng-class 表达式?

0 投票
1 回答
2303 浏览

angularjs - AngularJS 添加两个类和一个有条件的

如果 item.qty 为 0,我想设置一个跨度 2 个类和一个带条件的类。我有这个

但这不起作用..我认为这不是sintax,但我还没有找到任何想法。

0 投票
1 回答
1256 浏览

javascript - 如何从 ng-repeat 表达式中更新父范围变量?

我遇到了一种情况,我必须从 ng-repeat 表达式中更新范围变量(实际上是 ng-repeat 中的 ng-class 调用)。

在 app.js 中:

示例应用截图

Ng-repeat 在子控制器中,我要更新的数据在其父控制器中。我知道您已经多次阅读相同的问题,请继续阅读并查看JsFiddle示例。

因此,表达式函数检查该特定 ng-repeat 迭代的过滤数据,如果它与其他一些相应的父范围变量不匹配,它会返回一个类,但它也应该更新父范围计数器。由于这些表达式不只计算一次,而是至少计算一次(由于摘要中的脏检查),它会导致计数器在每种情况下都增加一次以上。

我已经通过在 ng-repeat 之后计算应用于该特定数据的类来解决我的问题(您将在JsFiddle示例中看到)。但是我想我将来可能会遇到同样的问题,所以我想学习如何在 ng-repeat 迭代的表达式中更新父范围。

我已经放了第二个JsFiddle,我尝试在父控制器和子控制器上使用工厂,希望更新两个控制器的公共变量。当我记录(consol.log)每个迭代和工厂方法变量时,它显示迭代时间 + 1(仍然是错误值),但它没有反映在页面表达式上......根本没有意义。

我会很感激任何帮助。谢谢。

JsFiddle 1 JsFiddle 2

0 投票
4 回答
24278 浏览

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

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

在 ng-class 中使用对象

http://plnkr.co/edit/uZNK7I?p=preview

正确导致


在 ng-class 中使用表达式

http://plnkr.co/edit/tp6lgR?p=preview

正确导致


现在,一起使用它们怎么样?

我需要动态类名(如'count-' + n),但还需要多个类的对象语法。

我不能只使用 2 个ng-class属性(http://plnkr.co/edit/OLaYke?p=preview),只有第一个有效。

有什么建议么?

0 投票
1 回答
240 浏览

angularjs - ng-click 复选框返回数组

我的 AngularJS 应用程序有问题,我尝试在控制器中调用一个函数,但是当我console.log(id);id 是一个数组时的参数...

我使用[ ]而不是{{ }}因为我正在使用 TWIG

Angular 模板(html 源代码)

由 Angular 渲染

我的 JS 函数

控制台输出:

问题是我有这个工作......

0 投票
3 回答
10681 浏览

javascript - AngularJS $watch 变量并重新评估 ng-class 表达式

我正在尝试在我的应用程序中实现一个类似书签的功能,并且必须观察一个变量,该变量存储所有带书签的 ID。基于该变量,我必须告诉ng-class重新评估它的函数表达式,以便bookmarked添加或不添加类。

当变量更改时,我如何告诉ng-class再次运行?$scope.Bookmarks

0 投票
1 回答
3766 浏览

javascript - AngularJS ng-class 添加/删除动画不应用/触发

<a>我正在尝试根据功能在 -Tag上添加/删除动画toggleBookmark。当它返回 true 并且工作正常时,将添加活动类。但是,ng-addoricon__bookmark-add动画不会在<a>标签上触发。

为什么?我究竟做错了什么?

HTML:

控制器:

CSS:

0 投票
1 回答
359 浏览

javascript - Angular ng-class 无法正确呈现 HTML

我是 AngularJS 的新手,我有下一个问题。我正在用这样的 ng-class 计算我的 body 标签的 CSS 类。

问题是有时会正确呈现 HTML,但有时类是空的。似乎 HTML 的渲染速度比控制器中函数的评估速度快。谁能指导我如何解决这个问题?

谢谢指教。

0 投票
1 回答
735 浏览

angularjs - 滑动直到单击按钮时,AngularJS ngClass 未应用于新的 ngView

本周我在一个移动应用程序上实现了滑动,但没有发现清晰的演示显示双向滑动。所以我想回馈社区一点,我会写一个。直到我注意到一些我无法理解的奇怪行为。

我在演示中放了两个按钮来试驾演示。要滑动,您可以在文本旁边使用鼠标。发生的情况是,当我加载演示并滑动已经存在的 ngView 从 slideDir 获取类时,新的却没有。发生这种情况是因为新视图具有新范围并且不知道 slideDir 应该是什么。

情况二是当我在滑动之前按下一个按钮时,在按钮使用的范围内创建并填充了一个 slideDir,因此滑动开始几乎表现得像它应该的那样(除了两个范围之间的一些同步问题)。

那么在我的配置中我做错了什么?我的假设是因为应用程序控制器位于更高的 div 上,所以每次加载新的 ngView 时都不会重新启动。

以下网址包含演示:http ://blackunknown.com/demos/swipingdemo/demo.html

这是我在body标签中的设置:

这是我的javascript:

编辑:要执行实际的滑动,不要使用按钮,而是单击文本旁边的拖动。