首页 \ 问答 \ 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

相关问答

更多

Angular2中的ng-class(ng-class in Angular2)

您必须在@View装饰器的directives属性中指定CSSClass 。 看看这个庞然大物 。 @Component({ selector: 'app', }) @View({ template: '<div [class]="classMap">Class Map</div>', directives: [CSSClass] }) class App { constructor() { this.classMap = { 'class1': t ...

如何避免在Python中意外搞乱基类?(How to avoid accidentally messing up the base class in Python?)

使用带有两个下划线的私有变量 。 这样,名称修改可以防止您弄乱父类( 在正常使用情况下 )。 由于类私有成员有一个有效的用例(即为了避免名称与子类定义的名称冲突),因此对这种称为名称修改的机制的支持有限。 形式__spam的任何标识符(至少两个前导下划线,最多一个尾随下划线)在文本上用_classname__spam替换,其中classname是当前类名,其中前导下划线被剥离。 只要它出现在类的定义中,就可以在不考虑标识符的句法位置的情况下完成这种修改。 [...]请注意,修剪规则主要是为了避免事 ...

用ng单击几个元素来切换类(Toggle class with ng-click on several elements)

我为测试做了简单的指示: module.directive('toggleClass', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() { element.toggleClass(attrs.toggleClass); ...

ng-repeat值为最后的ng-class(ng-repeat value as ng-class for last )

经过多次故障排除后,我提出了以下解决方案(扩展@tasseKATT的原始答案: <td ng-class="{true: [row[th], 'staticCSSClassName']}[$last]" ng-repeat="th in ths">{{row[th]}}</td> 上面的代码为ng-repeat中的最后一个<td>添加了两个类: 行中包含的值 [th] staticCSSClassName 因此,基本上, Object中的值部分可以是字符串数组,其中可以包含来自ng-repeat ...

jQuery Mobile弄乱了我的课程(jQuery Mobile messing up my classes)

元素可以有多个类,当这些类在HTML中显示时,它们显示为 class="class1 class2 class3" 订单在很大程度上并不重要。 这段代码...... $(".device_to_remove").text($("#geraete_DID").text()); ...将使用类device_to_remove选择所有元素,无论其他类是否也应用于这些元素。 然后,它将尝试将这些元素的文本设置为id为geraete_DID的元素的文本。 你的哪些元素实际上有类device_to_r ...

AngularJS,使用ng-class来分配一个类,如果变量=某事(AngularJS, using ng-class to assign a class if variable = something)

你可以做: ng-class="{true: 'icon-pfeil_unten', false: 'icon-pfeil-oben'}[category == 16]" 所以基本上, if category == 16 evals为true ,请添加class icon-pfeil_unten You can do: ng-class="{true: 'icon-pfeil_unten', false: 'icon-pfeil-oben'}[category == 16]" So basic ...

AngularJS ng-class和ng-style协同工作(AngularJS ng-class and ng-style working together)

尝试在课堂上使用!important。 这可能会解决您的问题。 .selected{ background-color: red !important; } 内联样式优先于类的css,直到!important应用。 来自CheezyCode的干杯 Try using !important in your class. This might fix your problem. .selected{ background-color: red !important; } Inline ...

服务类继承和文件顺序(Service class inheritance and files order)

你没有详细说明你的设置是怎样的。 但是当我使用(TypeScript)内部模块时,我遇到了这个问题。 你只需要确保你不会忘记添加参考评论: ///<reference path="relative/path/to/GeneralResource.ts" /> 在你的app/resources/serviceName.ts文件中。 注释的目的是确保文件(或其内容)的顺序在最终的app.js文件中正确(如果使用--outFile标志)。 You did not elaborate how your ...

相关文章

更多

最新问答

更多
  • Unity着色器错误;(Unity shader error; presumably in if statement)
  • 如何在Liferay portlet中设置Cookie?(How to set a Cookie in Liferay portlet?)
  • C#只读访问List <>或其他集合,或ToArray()魔术(C# readonly access to List<> or other collection, or ToArray() magic)
  • 如何使用Google Web工具包创建登录应用程序?(How to create a login application using Google web tool kit? [closed])
  • 如何使我的函数返回结果作为全局变量?(How to make my function return results as a global variable?)
  • 为什么我的网站需要“启用32位应用程序”?(Why does my website need “Enable 32-bit applications”?)
  • 红宝石数组具有相同的值(ruby array of hash with same value)
  • Android(在Scala中):StackOverflowError取决于何时启动线程?(Android (in Scala): StackOverflowError depends on when to start a thread?)
  • 适用于iOS应用的通用链接(Universal Links for iOS apps)
  • 创建并打开文件linux编程(create and open file linux programming)
  • Datepicker,第2个日期是从第1个日期开始的X天(Datepicker, 2nd date is X days from 1st date)
  • 背景大小过渡不起作用(Transition on background-size doesn't work)
  • 在React / Redux中的On Click函数中传递Prop(Passing a Prop in an On Click Function in React/Redux)
  • 关键字在代码中做了什么,是否有没有此关键字的替代方法?(what does the keyword this does in the code and are there any alternate methods without this keyword? [duplicate])
  • 反向设计FoxPro / dBsae数据库以创建EER模型(Reverse Engineer a FoxPro/dBsae database to create the EER model)
  • 在R中的变量中组合具有相同值的行(Combine rows that have same value in a variable in R [duplicate])
  • SQL Server:非空唯一主键(SQL Server: Non-null unique vs. Primary Key)
  • 将扩展ASCII字符代码转换为ISO-8859-1(Convert extended ASCII character codes to ISO-8859-1)
  • 如何在.NET中读取m4a文件中的标签?(How to read tags out of m4a files in .NET?)
  • 呼叫链接的性能提升?(Performance gain on call chaining?)
  • 风景名胜区规划设计文本里面都包含哪些内容?推荐一家旅游规划设计公司?谢谢!
  • 如何在String中将字符串转换为枚举?(How do I convert a string to enum in TypeScript?)
  • SQLite SELECT出现异常如何解决它?(SQLite SELECT gives exception How to fix it?)
  • NSLog不会从ViewController类输出,而是来自AppDelegate类的WILL。(NSLog will NOT output from the ViewController class, but WILL from the AppDelegate class. iOS:Objective C)
  • 更改UIPicker突出显示的标签宽度(change UIPicker highlighted tab width)
  • 空心倒五角形(Hollow inverted pentagon)
  • 如何设置仅使用OpenID的Plone站点(How to setup Plone sites working only with OpenID)
  • Paperclip缺少Amazon S3的协议(https)(Paperclip is missing the Protocol (https) with Amazon S3)
  • 从宏中部署netbeans中的ANT文件(Deploy ANT file in netbeans from macro)
  • XMLReader是未知的(XMLReader is unknown)