如何设置角UI手风琴标题类/风格 [英] How to set class/style of accordion heading in Angular UI

问题描述

我采用了棱角分明的UI呈现在手风琴LITTEL数据库条目。在第一个试验中，我用的引导，但我综合AngularJS意见，手风琴没有更充分的工作（空HREF ...）。后来我换成我的引导与手风琴UI角度引导一个，默认的模板。

我的问题是，在引导版本，我设法程式化取决于手风琴标题标题（我用的是NG重复指令，并在标题里面的吴式）。我试着做角UI一样，但即使我的自定义类是不渲染。

本示例code与引导伟大的工作，但没有更多的与ui.boostrap手风琴：

 手风琴group.accordion-groupLog（NG-重复=在data.entries项目|过滤器：搜索）
   手风琴heading.accordion-headingLog（NG-风格={的backgroundColor：款式[item.importance-1] .bkcolor，颜色：款式[item.importance-1]。颜色}）
         {{item.title}}（{{item.importance}}）
 

这里的目标是应用基于一个项目字段不同的风格（背景颜色和文本颜色）。此外，该类手风琴headingLog是调整手风琴默认大小。

下面是呈现code：

 ＆LT; D​​IV CLASS =的手风琴groupLog手风琴组NG-范围NG重复=项data.entries |过滤器：搜索＆GT;
   ＆LT; D​​IV CLASS =的手风琴标题＆GT;
      ＆LT;一类=的手风琴切换NG结合NG点击=！isOpen会= isOpen会手风琴transclude =标题＆GT;
......
 

和我期待的是这样的：

 ＆LT; D​​IV CLASS =的手风琴groupLog手风琴组NG-范围NG重复=项data.entries |过滤器：搜索＆GT;
   ＆LT; D​​IV NG风格={的backgroundColor：款式[item.importance-1] .bkcolor}级=的手风琴标题手风琴headingLog的风格=背景色：RGB（214，24，40）; ＆GT;
 

我试图把与NG-class属性手风琴式headingLog类，但它不工作。只是为了测试，我试图将类和手风琴的身体内的风格，它工作得很好。我conclue的accordionHeading指令不接受任何类或属性？如何在标题动态应用样式，然后???

另一项试验是建立自己的模板。我能够手风琴式headingLog类适用于标题，但我怎么可以设置一个可定制的风格？我试图用吴式并应用一个固定的风格，但它不能正常工作。

 脚本（类型=文/ NG-模板ID =模板/手风琴/手风琴group.html）。
    div.accordion组
    div.accordion-heading.accordion-headingLog（NG-风格={背景颜色：＃123456）
       a.accordion曲肘（NG-点击=isOpen会=！isOpen会，手风琴transclude =标题）{{标题}}
    div.accordion体（崩=！isOpen会）
       div.accordion-内（NG-transclude）
 

解决方案

角UI的手风琴有一个accordionHeading指令，允许包括HTML。在源$ C ​​$ C的例子：

下面手风琴组

  //使用手风琴标题，以提供含有HTML标题
//＆LT;手风琴组＆gt;
//＆LT;手风琴标题＆GT;标题包含HTML  - ＆LT; IMG SRC =...＆GT;＆LT; /手风琴标题＆GT;
//＆所述; /手风琴式组＆gt;
 

因此​​，也许你可以做这样的事情来有条件地应用自定义CSS：

 ＆LT;手风琴组＆gt;
＆LT;手风琴标题纳克级={定制式：item.title}＆GT;您的标题＆LT; /手风琴标题＆GT;
＆LT; /手风琴组＆gt;
 

下面是角的UI手风琴源$ C ​​$ C <一个href=\"https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js\">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

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