如何在Angular UI中设置手风琴标题的class/style。

25 浏览
0 Comments

如何在Angular UI中设置手风琴标题的class/style。

我正在使用Angular UI来渲染数据库中的小条目，以手风琴的形式展示。在第一次尝试中，我使用了Bootstrap，但是当我集成了AngularJS视图后，手风琴无法完全工作（href为空...）。然后，我用Angular UI Bootstrap替换了我的Bootstrap手风琴和默认模板。\n我的问题是，在Bootstrap版本中，我成功地根据手风琴标题来设置标题的样式（我使用了ng-repeat指令和标题内部的ng-style）。我尝试使用Angular UI做同样的事情，但是即使我的自定义类也没有显示出来。\n这段示例代码在Bootstrap中运行得很好，但在UI.Bootstrap手风琴中却不行：\n

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

\n这里的目标是根据条目字段应用不同的样式（背景颜色和文本颜色）。此外，accordion-headingLog类用于调整手风琴的默认大小。\n这是渲染出的代码：\n

      
......

\n而我期望的是：\n



\n[编辑]\n我尝试将accordion-headingLog类与ng-class属性放在一起，但也没有起作用。为了测试，我尝试在手风琴的内容内应用类和样式，结果运行良好。我得出结论，accordionHeading指令不接受任何类或属性？那么如何动态地在标题上应用样式呢？？\n[编辑]\n另一个尝试是构建自己的模板。我可以将accordion-headingLog类应用到标题上，但是如何设置可定制的样式呢？我尝试使用ng-style并应用一个固定的样式，但是没有起作用。\n


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)




															

							

															

						

						
0

					

				


			


			
			

	

		

			

				3
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题的原因是在升级到最新版本的angular、bootstrap等之后，没有找到完全解答这个问题的答案。解决方法有两种：使用[panelClass]属性并替换手风琴组件及其子组件中的现有样式，或者找到组件使用的特定类并根据需要使用常规的css规范进行样式修改。第一种方法更加麻烦，需要进行大量的试错来配置所需的规范。第二种方法更简单，只需要对所使用的组件进行一些调查。具体代码如下：




    
    






accordion-group::ng-deep .custom-class>a{background-color: black !important;}
accordion-group::ng-deep .custom-class>a:hover{color:white !important;}






    
    






#blah .btn{text-decoration: none;}
#blah .btn:hover{text-decoration: underline;}





以上是这个问题的原因和解决方法。

									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题的原因是在Angular UI中设置accordion heading的class/style。解决方法是改变CSS并在父级"accordion-group"中添加一个class。


解决方法中的代码如下：


Template:




<accordion close-others="true">
    <accordion-group ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
        <accordion-heading ng-click="isopen=!isopen">
            {{ elem.name }} 
        </accordion-heading>
        This content is straight in the template.
    </accordion-group>
</accordion>





HTML:




<accordion close-others="true">
    <div class="panel-group" ng-transclude="">
        <div class="panel panel-default ng-isolate-scope collapsed" ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
            <div class="panel-heading">
                <h4 class="panel-title">
                <a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                    <span class="ng-binding ng-scope"> 2001 </span></a>
                </h4>
            </div>
            <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
                <div class="panel-body" ng-transclude="">
                    <accordion-heading ng-click="isopen=!isopen" class="ng-scope"></accordion-heading>
                    <span class="ng-scope">
                        This content is straight in the template.
                    </span>
                </div>
            </div>
        </div>
    </div>
</accordion>





CSS:




accordion>.panel-group .panel.collapsed .panel-heading .accordion-toggle {
    color: #478fca;
    font-weight: 400;
    background-color: #F9F9F9;
}





同时，文章提到可以创建一个directive来改变子元素的class，但并不认为这是最好的解决方法。

									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题出现的原因是使用Angular-UI的accordion时，想要给accordion heading设置自定义的class或style，但不知道如何实现。解决方法是使用ng-class指令来根据条件应用自定义的css样式。具体的实现代码如下：





   Your Title 






其中，ng-class指令会根据item.title的条件是否为真来决定是否应用custom-style这个class。这样就可以根据需要来动态地设置accordion heading的样式。


另外，作者还提到可以使用ngStyle指令来实现相同的效果，但需要注意是否会与class="accordion-headingLog"冲突。作者对问题的具体原因不太确定，但决定尝试使用ngClass来解决问题。


作者在解决问题的过程中参考了一个在Angular中处理条件样式的问题的stackoverflow链接：stackoverflow.com/questions/13813254/…，经常用来解决类似的问题。

									

				

									

			

			
0