博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularJS ngClass条件
阅读量:2380 次
发布时间:2019-05-10

本文共 3788 字,大约阅读时间需要 12 分钟。

本文翻译自:

Is there any way to make an expression for something like to be a conditional? 有什么办法可以使像这样的表达式成为条件表达式吗?

For example, I have tried the following: 例如,我尝试了以下方法:

test

The issue with this code is that no matter what obj.value1 is, the class test is always applied to the element. 此代码的问题在于,无论obj.value1是什么,类测试始终应用于该元素。 Doing this: 这样做:

test

As long as obj.value2 does not equal a truthy value, the class in not applied. 只要obj.value2不等于真实值,就不会应用该类。 Now I can work around the issue in the first example by doing this: 现在,通过执行以下操作,我可以在第一个示例中解决此问题:

test

Where the checkValue1 function looks like this: 其中checkValue1函数如下所示:

$scope.checkValue1 = function() {  return $scope.obj.value === 'somevalue';}

I am just wondering if this is how ng-class is supposed to work. 我只是想知道ng-class是否应该工作。 I am also building a custom directive where I would like to do something similar to this. 我还在建立一个自定义指令,在其中我想做类似的事情。 However, I can't find a way to watch an expression (and maybe that is impossible and the reason why it works like this). 但是,我找不到观察表达式的方法(也许这是不可能的,以及它如此工作的原因)。

Here is a to show what I mean. 这是显示我的意思的 。


#1楼

参考:


#2楼

Your first attempt was almost right, It should work without the quotes. 您的第一次尝试几乎是正确的,它应该没有引号。

{test: obj.value1 == 'someothervalue'}

Here is a . 这是一个 。

The ngClass directive will work with any expression that evaluates truthy or falsey, a bit similar to Javascript expressions but with some differences, you can read about . ngClass指令可与任何评估为真或假的表达式一起使用,这有点类似于Javascript表达式,但有一些区别,您可以在阅读。 If your conditional is too complex, then you can use a function that returns truthy or falsey, as you did in your third attempt. 如果条件太复杂,则可以像第三次尝试一样使用返回true或false的函数。

Just to complement: You can also use logical operators to form logical expressions like 只是为了补充:您还可以使用逻辑运算符来形成逻辑表达式,例如

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

#3楼

Angular syntax is to use the : operator to perform the equivalent of an if modifier 角语法是使用运算符执行与if修饰符等效的操作

Add clearfix class to even rows. 将clearfix类添加到偶数行。 Nonetheless, expression could be anything we can have in normal if condition and it should evaluate to either true or false. 尽管如此,如果条件满足,表达式可以是我们在正常情况下可以拥有的任何东西,并且它的值应该为true或false。


#4楼

Using ng-class inside ng-repeat 在ng-repeat中使用ng-class

{
{$index + 1}}
{
{task.name}}
{
{task.date|date:'yyyy-MM-dd'}}
{
{task.status}}

For each status in task.status a different class is used for the row. 对于task.status中的每个状态,该行使用不同的类。


#5楼

Using function with ng-class is a good option when someone has to run complex logic to decide the appropriate CSS class. 当有人必须运行复杂的逻辑来确定适当的CSS类时,将功能与ng-class结合使用是一个不错的选择。

HTML: HTML:

Testing ng-class using function

CSS: CSS:

.testclass { Background: lightBlue}

JavaScript : JavaScript

function testCtrl($scope) {    $scope.getCSSClass = function() {     return "testclass ";  }     }

#6楼

Angular JS provide this functionality in . Angular JS提供了此功能。 In which you can put condition and also assign conditional class. 您可以在其中放置条件,也可以分配条件类。 You can achieve this in two different ways. 您可以通过两种不同的方法来实现。

Type 1 类型1

In this code class will be apply according to value of status value 在此代码类中,将根据状态值应用值

if status value is 0 then apply class one 如果状态值为0,则应用类

if status value is 1 then apply class two 如果状态值是1,那么申请二级

if status value is 2 then apply class three 如果状态值为2,则应用三级


Type 2 2型

In which class will be apply by value of status 根据状态值将应用于哪个类别

if status value is 1 or true then it will add class test_yes 如果状态值为1或true ,则将添加类test_yes

if status value is 0 or false then it will add class test_no 如果状态值为0或false ,则将添加类test_no

转载地址:http://xuexb.baihongyu.com/

你可能感兴趣的文章
ArcGIS二次开发之读取遥感图像像素值的做法
查看>>
netcdf源码在windows上的编译
查看>>
慎用VC 6.0
查看>>
游戏杆编程心得
查看>>
周例会的作用
查看>>
字符集研究之多字节字符集和unicode字符集
查看>>
字符集研究之不同字符集的转换方式
查看>>
参观广东省博物馆
查看>>
C#调用C库的注意事项
查看>>
游戏杆编程心得二:如何判断按钮的有效按下
查看>>
一个应用程序无法启动错误的解决过程
查看>>
除虫记——有关WindowsAPI文件查找函数的一次压力测试
查看>>
Incredibuild导入key的方式
查看>>
跨平台C++开源代码的两种常用编译方式
查看>>
VC和MATLAB混合开发需要注意的一个问题
查看>>
成都一日游
查看>>
清明节太原两日游
查看>>
Java学习笔记(一)
查看>>
关于IT公司招聘的一个思考
查看>>
C#调用C++接口返回字符串的做法
查看>>