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);">

[编辑]
我试图将accordion-headingLog类放在ng-class属性中,但它也不起作用.为了测试,我尝试将类和风格应用于手风琴的主体内部,并且效果很好.我认为accordionHeading指令不接受任何类或属性？如何在标题上动态应用样式然后???

[编辑]
另一个试验是建立我自己的模板.我可以将accordion-headingLog类应用于标题,但是如何设置可自定义的样式？我尝试使用ng-style并应用固定样式,但它不起作用.

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

原文链接：https://www.f2er.com/angularjs/142134.html

angularjs – 如何在Angular UI中设置手风琴标题的类/样式

猜你在找的Angularjs相关文章