एंगुलर यूआई

Question

में एग्रीजन शीर्षक की कक्षा/शैली कैसे सेट करें मैं एक accordion में लिटल डेटाबेस प्रविष्टियों को प्रस्तुत करने के लिए कोणीय यूआई का उपयोग कर रहा हूं। पहले परीक्षण में, मैंने बूटस्ट्रैप का उपयोग किया, लेकिन जैसा कि मैंने एंगुलरजेएस विचारों को एकीकृत किया, accordion अब पूरी तरह से काम नहीं कर रहा है (खाली href ...)। मैंने फिर अपने बूटस्ट्रैप accordion को कोणीय यूआई बूटस्ट्रैप एक और डिफ़ॉल्ट टेम्पलेट के साथ बदल दिया।

मेरी समस्या यह है कि बूटस्ट्रैप संस्करण में, मैंने एग्रीजन शीर्षक (मैं एनजी-दोहराव निर्देश का उपयोग कर रहा था, और शीर्षक के अंदर एनजी-शैली का उपयोग कर रहा था) के आधार पर शीर्षक को स्टाइलिज्ड करने में कामयाब रहा। मैंने कोणीय यूआई के साथ ऐसा करने की कोशिश की, लेकिन यहां तक ​​कि मेरी कस्टम कक्षा भी प्रस्तुत नहीं की गई है।

यह नमूना कोड 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 accordion डिफ़ॉल्ट आकार का आकार बदलना है।

यहाँ गाया कोड है:

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

[संपादित करें] मैं एनजी-वर्ग विशेषता के साथ अकॉर्डियन-headingLog वर्ग डालने की कोशिश की, लेकिन यह या तो काम नहीं करता है। बस परीक्षण करने के लिए, मैंने accordion के शरीर के अंदर कक्षा और शैली को लागू करने की कोशिश की, और यह अच्छी तरह से काम करता है। मुझे लगता है कि accordion पढ़ना निर्देश किसी वर्ग या विशेषता स्वीकार नहीं करता है? शीर्षक पर शैली को गतिशील रूप से कैसे लागू करें ???

[संपादित करें] एक और परीक्षण मेरा खुद का टेम्पलेट बनाना था। मैं शीर्षक पर accordion-headingLog क्लास को लागू करने में सक्षम हूं, लेकिन मैं एक अनुकूलन शैली कैसे सेट कर सकता हूं? मैंने एनजी-शैली का उपयोग करने की कोशिश की और एक निश्चित शैली लागू की, लेकिन यह काम नहीं करता है।

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) 

Answer 1

कोणीय-यूआई के एग्रीजन में एक accordion है जिसमें निर्देश है जो आपको 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> 

तो हो सकता है आप कुछ इस तरह कर सकते हैं सशर्त अपने कस्टम सीएसएस लागू करने के लिए:

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

यहाँ कोणीय-यूआई अकॉर्डियन स्रोत कोड https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

Answer 2

है मुझे एक ही समस्या थी, मेरे लिए तेज़ समाधान सीएसएस बदल गया था और माता-पिता "accordion-group" में एक वर्ग जोड़ना:

टेम्पलेट:

<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=""> 
     <!-- ngRepeat: elem in group.elements --> 
     <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> 

सीएसएस:

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

आप एक निर्देश एक बच्चों के वर्ग बदलने के लिए बना सकते हैं अच्छा है, लेकिन मुझे विश्वास नहीं है कि यह सबसे अच्छा समाधान है।