angularjs – 如何在Angular UI中设置手风琴标题的类/样式
我正在使用Angular UI在手风琴中呈现littel数据库条目.在第一次试验中,我使用了bootstrap,但是当我整合AngularJS视图时,手风琴不再完全正常工作(空的href ……).然后我用角度UI bootstrap one和默认模板替换了我的bootstrap手风琴.
我的问题是,在bootstrap版本中,我设法根据手风琴标题(我使用ng-repeat指令和标题内的ng-style)对标题进行了风格化.我尝试使用Angular UI做同样的事情,但即使我的自定义类也没有渲染. 这个示例代码在bootstrap上运行得很好,但是ui.boostrap手风琴没有了: accordion-group.accordion-groupLog(ng-repeat="item in data.entries | filter:search") accordion-heading.accordion-headingLog(ng-style="{backgroundColor: styles[item.importance-1].bkcolor,color: styles[item.importance-1].color}") {{item.title}} ({{item.importance}}) 这里的目标是基于项目字段应用不同的样式(背景颜色和文本颜色).此外,accordion-headingLog类是为了调整手风琴的默认大小. 这是渲染的代码: <div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search"> <div class="accordion-heading"> <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading"> ...... 我期待的是: <div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search"> <div ng-style="{backgroundColor: styles[item.importance-1].bkcolor}" class="accordion-heading accordion-headingLog" style="background-color: rgb(214,24,40);"> [编辑] [编辑] script(type="text/ng-template",id="template/accordion/accordion-group.html"). div.accordion-group div.accordion-heading.accordion-headingLog(ng-style="{background-color: #123456") a.accordion-toggle(ng-click="isOpen = !isOpen",accordion-transclude="heading") {{heading}} div.accordion-body(collapse="!isOpen") div.accordion-inner(ng-transclude)
Angular-UI的手风琴有一个accordionHeading指令,允许你包含HTML.源代码中的示例:
// Use accordion-heading below an accordion-group to provide a heading containing HTML // <accordion-group> // <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading> // </accordion-group> 所以也许你可以做这样的事情来有条件地应用你的自定义css: <accordion-group> <accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading> </accordion-group> 这是Angular-UI手风琴源代码https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |