angularjs – 如何使用ng-class强制类名称顺序
发布时间:2020-12-17 08:47:38 所属栏目:安全 来源:网络整理
导读:我使用语义ui和angular(1.4)ui来构建应用程序.我遇到这样一种情况:通过角度动态添加类名导致错误的渲染,因为ng-class似乎随意重新排列类名.这是不合需要的,因为语义要求某些类名组合遵循自然/语义顺序.例: div class="ui two column grid" div ng-class="w
我使用语义ui和angular(1.4)ui来构建应用程序.我遇到这样一种情况:通过角度动态添加类名导致错误的渲染,因为ng-class似乎随意重新排列类名.这是不合需要的,因为语义要求某些类名组合遵循自然/语义顺序.例:
<div class="ui two column grid"> <div ng-class="wideVersion? 'sixteen wide column': 'fourteen wide column'"></div> </div> 这个结果(当范围变量wideVersion改变时)在dom中: <div class="ui two column grid"> <div class="wide column fourteen"></div> </div> 这不起作用,因为语义要求类名遵循此用例中的自然顺序.我尝试了多个ng级变体但结果是一样的. 谢谢
我认为你可以使用ng-attr-class或者只使用内插插值的类.
但是有些情况下angular会自动向元素添加类,例如ng-show和form输入,因此您可能需要找到更完整的解决方案. angular.module('test',[]) .controller('Test',function($scope){ }); .test.one.two { color:red; } .test.three.four { color:blue; } .test.five.six { color:green; } .test.seven.eight { color:pink; } <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <div ng-app='test' ng-controller='Test'> <div ng-attr-class="{{checked ? 'test one two' : 'test three four'}}">test1</div> <div class="{{checked ? 'test five six' : 'test seven eight'}}">test2</div> <input type='checkbox' ng-model='checked'> click </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |