当前位置: 首页 > 面试题库 >

Angular.js中的动态类

李言
2023-03-14
问题内容

我想将css类动态添加到<li>我要遍历的元素中。循环是这样的:

<li ng-repeat="todo in todos" ng-class="{{todo.priority}}">
  <a href="#/todos/{{todo.id}}">{{todo.title}}</a>
  <p>{{todo.description}}</p>
</li>

在我的待办事项模型中,我具有属性优先级,可以是“紧急”,“不太重要”或“正常”,我只想为每个元素分配类。

我知道我可以使用类似的布尔值来做到这一点,ng-class="{'urgent': todo.urgent}"
但是我的变量不是布尔值,而是具有三个值。我该怎么做?另请注意,ng-style="..."由于我的课程会改变一些视觉效果,因此我不想使用。


问题答案:

您可以简单地将一个函数指定为表达式,然后从那里返回适当的类。 编辑:动态类也有更好的解决方案。 请参阅下面的注释。

片段摘录:

<div ng-class="appliedClass(myObj)">...</div>

并在控制器中:

$scope.appliedClass = function(myObj) {
    if (myObj.someValue === "highPriority") {
        return "special-css-class";
    } else {
        return "default-class"; // Or even "", which won't add any additional classes to the element
    }
}

更好的方法

我最近了解了另一种方法。您传入一个对象,该对象具有与要操作的类相对应的属性,并且值是表达式或布尔变量。一个简单的例子:

ng-class="{ active: user.id == activeId }"

在这种情况下active,只要对象有user.id匹配项activeId,类就会被添加到元素中$scope



 类似资料:
  • 问题内容: 我在模板中有一个需要模板的自定义标签。该属性将由范围填充,然后需要正确的模板。 根据赞美诗的星期和日期,它有多种版本。我期望使用该指令来填充正确的部分。不会读取变量。 有在摘录目录多个文件被标记,… 问题答案: 您可以使用指令。 尝试这样的事情: UPD。 用于观看属性

  • 问题内容: 使用angular.js,我有一个要显示给用户进行编辑(然后提交)的表单域的动态列表: 和HTML: 看到这个小提琴。由于我不明白的原因,文本输入框不可编辑。如上所述,我尝试了两种不同的方法:和。是完全不可编辑的,将允许 一次 击键,然后变得模糊。我究竟做错了什么?谢谢。 问题答案: 它是可编辑的,但是在每次按键后,您的文本字段失去焦点,因此您必须再次单击它以放置另一个字符。 发生这种

  • 问题内容: 我正在尝试让Angular根据我的数据生成CSS滑块。我知道数据已经存在,并且能够为按钮生成数据,但是由于某种原因,代码不会填充ng- switch-。当我检查代码时,我会看到两次(我知道是正确的,因为我只有两个项目): 我的实际代码: 编辑:这是我要模拟的内容,尽管带有动态数据。http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview 问

  • 问题内容: 我试图将状态动态添加到我的应用程序,并尝试使用ui-router。我尝试遵循此线程。 就我而言,已经有一些现存状态,我需要追加到该列表中,并从json读取动态状态 由于某种原因,当尝试用于deferIntercept()方法时,在$urlRouterProvider上出现注入器错误。就我而言,我使用的是angular1.3,而ui路由器的版本是0.2.10。我看到您可以协同创建状态。但

  • 问题内容: 我刚刚开始学习Angular.js。如何在Angular.js中重新编写以下代码? 到目前为止,这是我的- html 我的方向正确吗? 问题答案: 在当前函数中,如果要分配给一个promise对象,则返回一个promise对象。 因此,除了分配给$ http之外,您还应该在成功的内部分配,如下所述:

  • 本文向大家介绍Angular.Js的自动化测试详解,包括了Angular.Js的自动化测试详解的使用技巧和注意事项,需要的朋友参考一下 本文着重介绍关于ng的测试部分,主要包括以下三个方面: 框架的选择(Karma+Jasmine) 测试的分类和选择(单元测试 + 端到端测试) 在ng中各个模块如何编写测试用例 下面各部分进行详细介绍。 测试的分类 在测试中,一般分为单元测试和端到端测试,单元测试