2015-10-14 6 views
5

के साथ कैसे मजबूर कर सकता हूं मैं एप्लिकेशन बनाने के लिए अर्थपूर्ण यूई और कोणीय (1.4) ui का उपयोग कर रहा हूं। मुझे ऐसी स्थिति का सामना करना पड़ रहा है जहां गलत नामांकन में कोणीय परिणामों के माध्यम से गतिशील रूप से वर्ग नाम जोड़ना है क्योंकि एनजी-क्लास इच्छा के अनुसार कक्षा के नामों को पुनर्व्यवस्थित कर रहा है। यह अवांछनीय है, क्योंकि अर्थपूर्ण उम्मीद है कि कुछ वर्ग नाम संयोजन प्राकृतिक/अर्थपूर्ण क्रम का पालन करने के लिए। उदाहरण:मैं वर्ग नाम ऑर्डर को एनजी-क्लास

<div class="ui two column grid"> 
    <div ng-class="wideVersion? 'sixteen wide column': 'fourteen wide column'"></div> 
</div> 

यह परिणाम (जब गुंजाइश चर wideVersion परिवर्तन) की एक डोम में:

<div class="ui two column grid"> 
    <div class="wide column fourteen"></div> 
</div> 

यह काम नहीं करता है, क्योंकि अर्थ इस प्रयोग के मामले में प्राकृतिक आदेश का पालन करने के classnames की आवश्यकता है। मैंने कई एनजी-क्लास बदलावों की कोशिश की है लेकिन परिणाम वही है।

धन्यवाद

उत्तर

0

मुझे लगता है कि आप अंदर प्रक्षेप के साथ ng-attr-class या सिर्फ क्लास का उपयोग कर सकते हैं। लेकिन ऐसे मामले हैं जहां कोणीय तत्वों को कक्षाओं में स्वचालित रूप से जोड़ रहा है, उदाहरण के लिए ng-show और फॉर्म इनपुट, इसलिए आपको अधिक पूर्ण समाधान ढूंढने की आवश्यकता हो सकती है।

angular.module('test', []) 
 

 
.controller('Test', function($scope){ 
 
    
 
});
.test.one.two { 
 
    color:red; 
 
} 
 

 
.test.three.four { 
 
    color:blue; 
 
} 
 

 
.test.five.six { 
 
    color:green; 
 
} 
 

 
.test.seven.eight { 
 
    color:pink; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> 
 
<div ng-app='test' ng-controller='Test'> 
 
    <div ng-attr-class="{{checked ? 'test one two' : 'test three four'}}">test1</div> 
 
    <div class="{{checked ? 'test five six' : 'test seven eight'}}">test2</div> 
 
    <input type='checkbox' ng-model='checked'> click 
 
</div>

+1

यह या तो काम नहीं करता। कक्षा के नाम अभी भी निर्दिष्ट आदेश से व्यवस्थित हो जाते हैं। – MOneSixInCode

+0

हम्म आप स्निपेट या बेवकूफ का उपयोग कर पुन: उत्पन्न कर सकते हैं? – Icycool

संबंधित मुद्दे