首页 \ 问答 \ ng-class搞乱了类的顺序(ng-class messing with the order of classes)

ng-class搞乱了类的顺序(ng-class messing with the order of classes)

我有一些非常简单的Angular代码,看起来像这样......

<div ng-repeat="message in data.messages" ng-class="'conversationCard-' + 
message.type"></div>

它工作,但结果输出看起来像这样....

<div ng-repeat="message in data.messages" ng-class="'conversationCard-' + 
message.type" class="ng-scope conversationCard-phone"></div>

问题是我的班级现在从ng-scope开始,这打破了我的css选择器,看起来像这样。

[class^="conversationCard"]

有没有办法获得角度去除ng-scope,或者至少把它放在类声明的末尾?


I have some very simple Angular code which looks like this...

<div ng-repeat="message in data.messages" ng-class="'conversationCard-' + 
message.type"></div>

It works, but the resulting output looks like this....

<div ng-repeat="message in data.messages" ng-class="'conversationCard-' + 
message.type" class="ng-scope conversationCard-phone"></div>

The problem is that my class now starts with ng-scope which is breaking my css selector which looks like this..

[class^="conversationCard"]

Is there any way of getting angular to remove the ng-scope, or at the very least put it at te end of the class declarations?


原文:https://stackoverflow.com/questions/14024966
更新时间:2019-07-13 09:05

最满意答案

如果您想通过css访问该类,则无关紧要:

div.conversationCard-phone{
    //css stuff
}

我不确定你为什么要使用在css中为类指定属性的能力,我所描述的方法是常用的方法。 您可以详细说明您使用属性选择器的原因吗?

编辑

将您的HTML更改为

<div ng-repeat="message in data.messages" ng-class="message.type" class="conversationCard"></div>

所以处理它就变成了

<div ng-repeat="message in data.messages" ng-class="message.type" class="ng-scope conversationCard phone"></div>

所以在你的CSS中你可以做到

div.conversationCard{
    //css stuff
}

如果你想把手机隔离一个:

div.conversationCard.phone{
    //css stuff
}

It shouldn't matter if you wanted to access that class via css:

div.conversationCard-phone{
    //css stuff
}

I'm not sure why you're using the ability to specify attributes in your css for classes, the method I've described is the common way of doing it. Can you perhaps elaborate on why you're using the attribute selector?

Edit

Change your html to

<div ng-repeat="message in data.messages" ng-class="message.type" class="conversationCard"></div>

So that processed it becomes

<div ng-repeat="message in data.messages" ng-class="message.type" class="ng-scope conversationCard phone"></div>

So in your css you can do

div.conversationCard{
    //css stuff
}

And if you want to isolate the phone one:

div.conversationCard.phone{
    //css stuff
}
2012-12-25

相关问答

更多

在折叠R中相同ID的变量值时,从宽数据转换为长数据(Reshaping from wide to long data while collapsing variable values for same IDs in R)

这是一个使用dplyr和tidyr解决方案: library(dplyr) library(tidyr) d <- read.table( text='PMID;Variable;Value 1;MH;Humans 1;MH;Male 1;MH;Middle Aged 1;RN;Aldosterone 1;RN;Renin 2;MH;Accidents, Traffic 2;MH;Male 2;RN;Antivenins 3;MH;Humans 3;MH;Crotulus 3;MH;Young

MySQL - 在一个表中计数记录,在另一个表中计算记录(MySQL - Count records in one table and sum records in another table)

这是MS-SQL 2000中的O'K: SELECT event.name AS name, count( * ) num_attendee ,amount FROM attendee RIGHT JOIN event on event.id = attendee.event_id LEFT OUTER JOIN( SELECT event_id,amount=SUM(Amount) FROM Gifts GROUP BY event_id ) Gifts ON Gif

Laravel 5任务调度程序(用于邮件队列)不起作用(Laravel 5 task scheduler (for mail queue) not working)

首先,我建议你不要使用laravel的命令调度程序。 使用laravel的任务调度程序的优缺点: 利弊 您的cron任务嵌入到您的代码中。 因此,如果您更改服务器,则无需记住您拥有的所有cron任务。 缺点 假设您还有其他几个cron任务。 任务T1每分钟运行一次,但任务T2每天运行,而任务T3每周二运行。 现在只需检查一下,您将运行一个守护程序,它将检查您的每一分钟是否在队列计划中有任何任务。 您的队列也应该尊重每个工作及其各自的时间。 相反,您可以为每个任务创建单独的命令。 并为他们运行cr

我可以创建一个依赖于shell中先前执行的命令的退出代码的bash脚本吗?(Can I create a bash script that relies on the exit code from the previously executed command in my shell?)

如果希望各种脚本共享功能,请考虑使用一些实用程序脚本创建目录并获取这些脚本。 也许您需要使用当前脚本的find dir来查找相对于正在运行的脚本的util lib。 # example file sourcing files in your own dir, stored in the var `shlib`. source "${shlib}"/thenDo source "${shlib}"/sqlutils 在你的情况下,我不会使用thenDo解决方案,但使用反斜杠在几行中编写命令: a

如何在循环中检查bool是否为false(How to check if bool is false in a loop)

好吧,您只需访问相关索引处的元素,然后检查字段值: if (TheObject.GetComponent<GetInObject>().PosInObect[i].isFilled) 但是,如果您不需要索引,我建议使用foreach循环: foreach (var position in TheObject.GetComponent<GetInObject>().PosInObect) { if (position.isFilled) { ... }

如何根据其他列表的值减少列表的内容?(How do I reduce the contents of a list based on the values of the other list?)

一个简单而且效率低下的答案(使用列表理解编辑): c = [el for el in a if (el-1) in b] d = [el for el in b if (el+1) in a] One simple and maybe inefficient answer (edited with list comprehension): c = [el for el in a if (el-1) in b] d = [el for el in b if (el+1) in a]

根据鼠标移动将背景位置x px移动到左/右(从背景位置:中心开始)(Move background-position x px to left/right according to mouse movements (starting from background-position:center))

只需减去您想要开始的位置: backgroundPosition: (e.pageX-650) + 'px ' + (e.pageY-410) + 'px' 更改速度调整鼠标位置的因子: backgroundPosition: (e.pageX*2-650) + 'px ' + (e.pageY*2-410) + 'px' 快一倍。 http://jsfiddle.net/KunZ4/538/ 对于背景中心的计算,您可以只拍摄图像路径,将其附加到不可见的图像并获得宽度和高度。 var u

WS到服务问题(WS to Service concern)

我认为您可能有一些单独的方法用于更频繁的用例,例如findByPrimaryKey(id)或findByName ,还有一个find by example方法,它将通过给定实体中的所有非null字段查找实体。 您还可以定义一个业务感知查询接口(我的意思是没有数据库层查询)来查找对象,但这会使您的休息服务层代码复杂化,所以我更喜欢分离和简单的方法,这将使您的服务层更具可读性。 还有一个参数对象设计模式,意味着在对象中对逻辑相关的参数进行分组,例如。 作为DateRange对象开始日期和日期。 但是

相关文章

更多

最新问答

更多
  • 图像TapGestureRecognizer未触发(Image TapGestureRecognizer not firing)
  • 从数组中选择项目(Selecting items from an array)
  • PhpStorm:简单的PHP表单不发布(PhpStorm: Simple PHP form not posting)
  • 如果语句只有Javascript中的数字(If statement with only a number in Javascript)
  • 截图Android中的黑色(Screenshot Black in Android)
  • 默认值如何在数据库中内部工作?(How does default value internally work in Database?)
  • 左连接不加入单个记录(Left Join Not Joining with a Single Record)
  • 在#sign drupal之后获取url参数(get url parameter after # sign drupal)
  • Crontab CD到目录(Crontab CD to Directory)
  • #inf c ++ visual studio(#inf c++ visual studio)
  • 使用Python将指数修改的高斯曲线拟合到数据(Fitting an exponential modified gaussian curve to data with Python)
  • Javascript - 具有音高和持续时间控制的文本到语音(Javascript - text to speech with pitch and duration control)
  • 群组和用户有多少通过?(Groups and Users has many oder has many through?)
  • 如何在简单的二叉树中选择节点所在的哪一侧?(How to pick which side a node is on in a simple binary tree?)
  • 在ImageView上添加TextView(Android)(Add TextView over ImageView (Android))
  • 使用工厂方法创建泛型(Using Factory Method to Create Generics)
  • cordova 4.1.2中的平台特定代码(platform specific code in cordova 4.1.2)
  • 使用php格式化日期[复制](Format date using php [duplicate])
  • 在Python中解析年,月,日,小时,分钟,秒(Parsing year, month, day, hour, minute, second in Python)
  • 用jquery替换图像和类(Replacing image and class with jquery)
  • 导入的module.submodule命名空间干扰彼此(imported module.submodule namespaces interfering with eachother)
  • 播放框架:提交按钮似乎不起作用(Play framework: Submit button doesn't seem to work)
  • 段落包括通过过渡带来的div(Paragraph covers div brought through transition)
  • 使用processing.Manager时对象是否重复?(Object duplicated when using processing.Manager?)
  • lxde意外退出(lxde quits unexpectedly)
  • 真正的Maven依赖是什么?(What really are Maven dependencies?)
  • 如何在我的代码中修复getJSON方法错误?(how to fix getJSON method error in my code?)
  • Google Analytics状态:已安装跟踪 - 但无法正常运行(Google Analytics Status: Tracking Installed - but isnt working)
  • 在模型文件中的非对象上调用成员函数num_rows()(Call to a member function num_rows() on a non-object in model file)
  • 有关UNIX中fork()函数的问题(Questions about the fork() function in UNIX)