如何在 Angular UI 中设置手风琴标题的类/样式 [英] How to set class/style of accordion heading in Angular UI

问题描述

我正在使用 Angular UI 在手风琴中呈现 littel 数据库条目.在第一次试用中，我使用了引导程序，但是当我集成了 AngularJS 视图时，手风琴不再完全工作(空的 href...).然后我用 angular UI bootstrap one 和默认模板替换了我的 bootstrap 手风琴.

我的问题是，在 bootstrap 版本中，我设法根据手风琴标题对标题进行了风格化(我使用了 ng-repeat 指令和标题中的 ng-style).我尝试对 Angular UI 做同样的事情，但即使我的自定义类也没有呈现.

这个示例代码在 bootstrap 上工作得很好，但在 ui.boostrap 手风琴上就不行了:

accordion-group.accordion-groupLog(ng-repeat="data.entries 中的项目 | filter:search")手风琴标题.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-heading"><a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" Accordion-transclude="heading">......

我期待的是:

<div ng-style="{backgroundColor:styles[item.importance-1].bkcolor}" class="accordion-heading手风琴-headingLog" style="background-color: rgb(214, 24, 40);">

我试图将手风琴标题日志类与 ng-class 属性放在一起，但它也不起作用.只是为了测试，我尝试在手风琴主体内部应用类和样式，并且效果很好.我的结论是，accordionHeading 指令不接受任何类或属性?那么如何在标题上动态应用样式???

另一个尝试是构建我自己的模板.我可以将 Accordion-headingLog 类应用于标题，但如何设置可自定义的样式?我尝试使用 ng-style 并应用固定样式，但它不起作用.

script(type="text/ng-template", id="template/accordion/accordion-group.html").div.accordion-groupdiv.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 的手风琴有一个手风琴标题指令，允许您包含 HTML.源代码中的例子:

//在手风琴组下方使用手风琴标题来提供包含 HTML 的标题//<手风琴组>//<accordion-heading>包含 HTML 的标题 - <img src="..."></accordion-heading>//</accordion-group>

所以也许你可以做这样的事情来有条件地应用你的自定义 css:

<accordion-heading ng-class="{'custom-style': item.title }">您的标题</accordion-heading></accordion-group>

这是 Angular-UI 手风琴源代码 https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

I'm using Angular UI to render littel database entries in an accordion. In a first trial, I used bootstrap, but as I integrated AngularJS views, accordion is no more fully working (empty href...). I then replaced my bootstrap accordion with angular UI bootstrap one and the default template.

My problem is that in the bootstrap version, I managed to stylized the heading depending on the accordion title (I was using the ng-repeat directive, and the ng-style inside the heading). I tried to do the same with Angular UI, but even my custom class is not rendered.

This sample code was working great with bootstrap, but no more with ui.boostrap accordion :

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}})

The goal here is to apply a different style (background color and text color) based on an item field. Furthermore, the class accordion-headingLog is to resize the accordion default size.

Here is the rendered code :

<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">
......

And I was expecting something like :

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

[EDIT] I tried to put the accordion-headingLog class with ng-class attribute, but it does not work either. Just to test, I tried to apply the class and the style inside the body of the accordion, and it works well. I conclue that the accordionHeading directive does not accept any class or attribute ? How to dynamically apply a style on the heading then ???

[EDIT] Another trial was to build my own template. I am able to apply the accordion-headingLog class to the heading, but how can I set a customizable style ? I tried to use ng-style and apply a fixed style, but it does not work.

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's accordion has an accordionHeading directive that allows you to include HTML. The example in the source code:

// 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>

So maybe you can do something like this to conditionally apply your custom css:

<accordion-group>
<accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading>
</accordion-group>

Here is the Angular-UI Accordion source code https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

这篇关于如何在 Angular UI 中设置手风琴标题的类/样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！