बूटस्ट्रैप 3 के साथ कोणीयजेएस में ग्रिड या टेबल का प्रतिनिधित्व करने का सबसे अच्छा तरीका? [बन्द है]

Question

मैं AngularJS और बूटस्ट्रैप 3 के साथ एक ऐप बना रहा हूं। मैं हजारों पंक्तियों के साथ एक टेबल / ग्रिड दिखाना चाहता हूं। एंगुलरजेएस और बूटस्ट्रैप के लिए सबसे अच्छा उपलब्ध नियंत्रण क्या है जैसे सॉर्टिंग, सर्चिंग, पेजिनेशन आदि।

Comments

आपको निश्चित रूप से एनजी-ग्रिड पर एक नज़र रखना चाहिए: angular-ui.github.io/ng-grid

— mainguy

UI बूटस्ट्रैप का उपयोग क्यों नहीं किया जाता है? यह हाल ही में बूटस्ट्रैप 3 का उपयोग करने के लिए अद्यतन किया गया है: angular-ui.github.io/bootstrap

— CallumVass

उन हजारों पंक्तियों को क्लाइंट को नहीं भेजा जाना चाहिए। इसलिए शुद्ध जावास्क्रिप्ट समाधान इतना बढ़िया काम नहीं करेगा। सर्वर को आपके लिए पेजेशन और / या खोज करने की आवश्यकता होगी।

— 21

अगली बार एनजाइटी टेबल को एक शॉट देने की कोशिश करें zizzamia.com/ng-tasty/directive/table यह बूटस्ट्रैप सीएसएस टेबल पर आधारित है :)

— zizzamia

कोणीय " यूआई-ग्रिड " में जा रहा है जिसमें टेबल की विशेषताएं इनबिल्ट होंगी। "jquery

— डेटैटैबल्स

Answer 1

NgGrid, ngTable, trNgGrid और स्मार्ट टेबल की कोशिश करने के बाद , मैं इस निष्कर्ष पर पहुंचा हूं कि स्मार्ट टेबल अब तक का सबसे अच्छा कार्यान्वयन AngularJS-wise और बूटस्ट्रैप-वार है। यह बिल्कुल उसी तरह बनाया गया है जैसे आप मानक कोणीय का उपयोग करके अपनी खुद की, भोली मेज का निर्माण करेंगे। इसके शीर्ष पर, उन्होंने कुछ निर्देश जोड़े हैं जो आपको छँटाई, छानने आदि में मदद करते हैं। उनका दृष्टिकोण भी अपने आप को विस्तारित करने के लिए काफी सरल बनाता है। तथ्य यह है कि वे तालिकाओं के लिए नियमित html टैग्स का उपयोग करते हैं और पंक्तियों के लिए मानक एनजी-रिपीट और स्वरूपण के लिए मानक बूटस्ट्रैप इसे स्पष्ट विजेता बनाता है।

यदि वे चाहते हैं तो उनका JS कोड कोणीय पर निर्भर करता है और आपका html बूटस्ट्रैप पर निर्भर कर सकता है। JS कोड कुल 4 kb का है और यदि आप एक छोटे पदचिह्न तक पहुँचना चाहते हैं तो आप वहां से सामान आसानी से निकाल सकते हैं।

जहां अन्य ग्रिड आपको विभिन्न क्षेत्रों में क्लॉस्ट्रोफोबिया देंगे, स्मार्ट टेबल सिर्फ खुले और बिंदु तक महसूस होती है।

यदि आप इनलाइन संपादन और अन्य उन्नत सुविधाओं पर बहुत अधिक भरोसा करते हैं, तो आप उदाहरण के लिए एनटेबल के साथ उठ सकते हैं और तेज चल सकते हैं। हालाँकि, आप स्मार्ट टेबल में ऐसे फीचर्स को आसानी से जोड़ने के लिए स्वतंत्र हैं।

स्मार्ट टेबल याद मत करो !!!

स्मार्ट टेबल से मेरा कोई संबंध नहीं है, सिवाय इसके कि मैं खुद इसका इस्तेमाल नहीं करता।

Comments

बस स्मार्ट टेबल में एक छोटा सा बग मिला, इसकी सूचना दी और यह घंटों के भीतर तय हो गया। मैं हैरान हूं कि हर कोई स्मार्ट टेबल का उपयोग नहीं कर रहा है - यह सभी अन्य लोगों की तुलना में बहुत बेहतर है।

— रिकी हेलेगेसन

स्मार्ट टेबल निश्चित रूप से एंगुलरजेएस के लिए सबसे अच्छा विकल्प है। NgGrid में और अधिक सुविधाएँ हैं, लेकिन स्मार्ट टेबल का विस्तार करके उन सुविधाओं को जोड़ना आसान है।

— टॉयलाल

एनजी-ग्रिड 3.0.7 अब जारी किया गया है, और इसने मेरे लिए अच्छा काम किया (जिसे अब यूआई-ग्रिड कहा जाता है)

— किमबॉल रॉबिन्सन

समस्या यह है: स्मार्ट टेबल पर पेजिनेशन वास्तव में बदसूरत है, कोई पहला पेज नहीं, कोई आखिरी पेज नहीं है, एनजी-टेबल पेजिनेशन वास्तव में अधिक एर्गोनॉमिक्स है। छँटाई के लिए एक ही बात, स्मार्ट-टेबल पर हम सिर्फ यह जानते हैं कि हम क्लिक करने से पहले

— छँट

तुच्छ के लिए स्मार्ट टेबल केवल परिदृश्य, बाकी सब के लिए यूआई-ग्रिड, या सिर्फ यूआई-ग्रिड :)

— randomUs1r

Answer 2

मुझे इसकी आवश्यकता थी और इन घटकों का उपयोग करके इसे हल किया:

• एंगुलरजेएस 1.0.8
• AngularUI Boostrap 0.10.0 : AngularJS 1.0.8 और Boostrap CSS 3.x के साथ संगत।
• एनजी-ग्रिड 2.0.7 : एंगुलरजेएस 1.0.8 के साथ संगत
• बूटस्ट्रैप CSS 3.0

तालिका घटक एनजी-ग्रिड एक स्क्रॉल करने योग्य ग्रिड में सैकड़ों पंक्तियों को प्रदर्शित करने में सक्षम है। यदि आपको हजारों प्रविष्टियों से निपटना है, तो आप एनजी-ग्रिड पेजिनेटर का उपयोग करना बेहतर मानते हैं। एनजी-ग्रिड का प्रलेखन उत्कृष्ट है और इसमें कई उदाहरण हैं। छँटाई के साथ संयोजन में भी छँटाई और खोज का समर्थन किया जाता है।

यहाँ एक वर्तमान परियोजना से एक स्क्रीनशॉट है जो आपको यह आभास देता है कि यह कैसा दिखता है:

[अद्यतन जुलाई 2017]

कुछ वर्षों के लिए उत्पादन में एनजी-ग्रिड होने के बाद, मैं अभी भी बता सकता हूं कि इस घटक के साथ कोई प्रमुख मुद्दे नहीं हैं। हां, बहुत सारे छोटे कीड़े, लेकिन कोई भी शो स्टॉपर्स (कम से कम मेरे उपयोग के मामलों में)। अगर आपने स्क्रैच से प्रोजेक्ट शुरू किया है, तो मैं इस घटक का उपयोग करने के खिलाफ दृढ़ता से सलाह दूंगा। यदि आप AngularJS 1.0.x से बंधे हैं तो यह घटक एक अच्छा विकल्प है । यदि आप कोणीय संस्करण चुनने के लिए स्वतंत्र हैं, तो एक नए घटक के लिए जाएं। इस ब्लॉग में सैम डीरिंग द्वारा कोणीय 4 के लिए तालिका घटकों की एक सूची तैयार की गई थी ।

Comments

Wijmo ग्रुपिंग, सॉर्टिंग आदि जैसी सुविधाओं के साथ कोणीय निर्देशन भी प्रदान करता है। आप ngGrid के लिए बेंचमार्क नमूना और AngularJS के साथ Wijmo ग्रिड की जाँच भी कर सकते हैं: demos.componentone.com/wijmo/Aridular/GridBenchmark/…

— आशीष

@Lars Behnke बूटस्ट्रैप टेबल स्टाइल को एनजी-ग्रिड पर कैसे लागू करें? जहां तक ​​मैंने देखा है, एनजी-ग्रिड टेबल ट्रे टैग का उपयोग नहीं करते हैं जो बूटस्ट्रैप सीएसएस पर गिना जाता है।

— कल्पदेव

एनजी-ग्रिड घटक का कार्यान्वयन बूटस्ट्रैप पर आधारित नहीं है। इसलिए मैंने बूट-लीप GUI तत्वों को जितना संभव हो उतना करीब-करीब महसूस करने के लिए एनजी-ग्रिड अनुकूलित किया है।

— लार्स बेहेनके

परियोजना एनजी-ग्रिड को यूआई ग्रिड के रूप में फिर से लिखा जा रहा है जो ui-grid.info

— मोस्टर

2016 के आंकड़े बताते हैं कि एनजी-टेबल प्लगइन अभी भी मांग में है: गिटहब: ए। एनजी-ग्रिड: ~ 3500 कमिट्स, ~ 800 मुद्दे। B. स्मार्ट-टेबल: ~ 300 कमिट, ~ 40 इश्यू। C. एनजी-टेबल: ~ 500 कमिट, ~ 200 मुद्दे। Google रुझानों की तुलना करके केवल एक ही विचार साबित होता है: "कोणीय स्मार्ट टेबल", "कोणीय यूआई ग्रिड", "कोणीय तालिका"। google.com/trends/…

— एंटोन ल्याहिन

Answer 3

"हजारों पंक्तियों" के साथ आपका सबसे अच्छा दांव जाहिर तौर पर सर्वर साइड पेजिंग करना होगा। जब मैंने कुछ देर पहले अलग-अलग AngularJs के टेबल / ग्रिड के विकल्पों पर ध्यान दिया, तो तीन स्पष्ट पसंदीदा थे:

• एनजी ग्रिड
• एनजी-टेबल
• स्मार्ट-टेबल

तीनों अच्छे हैं, लेकिन अलग तरह से लागू किए गए। जो आप चुनते हैं वह संभवतः किसी और चीज़ की तुलना में व्यक्तिगत पसंद पर आधारित होगा।

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

Comments

एनजी-टेबल का उल्लेख करते हुए मुझे खुशी हुई। मैं भी एनजी-ग्रिड पर एनजी-टेबल पसंद करता हूं क्योंकि इसमें बेहतर स्टाइल है, खासकर एडिट मोड में।

— रोब जे

यहाँ पर चलने योग्य बैंडवागन पर कूदते हुए। मैं एक प्रोजेक्ट के लिए एनजी-ग्रिड के साथ गया था और यह काफी भयानक रहा है। मैं एनजी-ग्रिड के साथ पूरी तरह से चला गया क्योंकि यह कोणीय-यूआई के साथ जुड़ा हुआ है और यह जीथब पर थोड़ा अधिक सक्रिय लगता है। मुझे लगता है कि मैं नंगा करने के लिए स्वैप करने जा रहा हूं। उम्मीद है कि यह बहुत मुश्किल नहीं होगा।

— ब्रेट

अरे, कोणीय पारिस्थितिकी तंत्र के साथ नौसिखिया, मैंने शुरू में "बेहतर" वेब साइट के कारण एनजी-ग्रिड के साथ जाने की कोशिश की, लेकिन उनकी गहरी-नेस्टेड संरचना के कारण जल्दी से स्टाइल की समस्याओं में भाग गया। अब तक मैं एनजी-टेबल को बेहतर मानता हूं, क्योंकि यह वास्तव में ए का उपयोग करता है table। मैं सिर्फ बूटस्ट्रैप टेबल क्लास लगा सकता हूं और यह काम करता है ...

— पियरे हेनरी

ध्यान दें कि स्मार्ट-टेबल का कोड और दृष्टिकोण मौलिक रूप से अपने संस्करण v1.0.0 (अगस्त 2014) के साथ बदल गया है, इसलिए इस तिथि से पहले की गई टिप्पणियाँ अब प्रासंगिक नहीं हैं

— laurent

एनजी-टेबल ज्यादातर निष्क्रिय हो गई है क्योंकि इसे यूक्रेन में एक व्यक्ति द्वारा बनाए रखा गया है और वहां पर बहुत सारे अन्य मुद्दे हैं। एनजी-ग्रिड को संस्करण 3.0 के लिए यूआई-ग्रिड के रूप में फिर से लिखा जा रहा है लेकिन यह उत्पादन के लिए तैयार नहीं है। तो अब आम तौर पर कोणीय तालिका कार्यान्वयन को चुनने या स्विच करने का एक अच्छा समय नहीं है। स्मार्ट-टेबल भी कमोबेश एक ही व्यक्ति द्वारा बनाए रखा जाता है। वर्तमान में हम एनजी-टेबल का उपयोग कर रहे हैं, लेकिन हम परिपक्व होते ही यूआई-ग्रिड पर स्विच करने की योजना बनाते हैं।

— स्प्लैकटर

Answer 4

अमीर कोणीय ग्रिड की एक विशेषता यह है:

trNgGrid

इसकी कुछ विशेषताएं:

• मन में सादगी के साथ बनाया गया था।
• सादे HTML तालिकाओं का उपयोग कर रहा है, जिससे ब्राउज़र रेंडरिंग का अनुकूलन कर सकता है।
• पूरी तरह से घोषणात्मक, चिंताओं के अलगाव को संरक्षित करना, इस प्रकार आपको अपने नियंत्रकों को गड़बड़ किए बिना, HTML में इसे पूरी तरह से वर्णन करने की अनुमति देता है।
• टेम्प्लेट और टू-वे डेटा बाउंड विशेषताओं के माध्यम से पूरी तरह से अनुकूलन योग्य है।
• टाइपस्क्रिप्ट में लिखे गए कोड को बनाए रखना आसान है।
• निर्भरता की एक बहुत छोटी सूची है: वैकल्पिक बूटस्वाच विषयों के साथ कोणीयज और बूटस्ट्रैप सीएसएस।

का आनंद लें। हां, मैं लेखक हूं। मैं वहाँ बाहर सभी कोणीय ग्रिड से तंग आ गया।

Comments

इसे किसी और मान्यता की आवश्यकता है। मैंने साथ शुरू किया ngGrid। मैं यह पता नहीं लगा सका कि मैं किस संस्करण का उपयोग करने वाला था, क्योंकि मुझे लगता है कि मैंने उनके 2.x से 3.x संक्रमण के बीच देखना शुरू किया था और न ही मैं काम करने के लिए टेबल प्राप्त करने में सक्षम था। फिर मैं ngTableकिस तरह के काम में चला गया । मैं सही ढंग से काम करने के लिए छँटाई या पेजिंग नहीं कर सकता था, लेकिन यह इस तरह से था क्योंकि मैं जिस तरह से डेटा लोड कर रहा था $http। तब मैंने यह trNgGridऔर पवित्र बकवास देखा ... उठना और भागना इतना आसान। काश मैं यहां और अधिक लिख पाता, लेकिन मेरा सुझाव है कि हर कोई इसे पहले एक कोशिश दे!

— रॉनी

मैं @ रोनी से पूरी तरह सहमत हूं। इस पर अधिक ध्यान दिया जाना चाहिए। पूरे दिन 'लड़ने' के बाद एनजी-ग्रिड / यूआई-ग्रिड के साथ बस कुछ और अधिक जटिल करने के लिए, मैंने ट्राइग्रिड को एक कोशिश दी और पहली कोशिश में काम किया।

— जॉनी एवरसन

यह अच्छा लग रहा है, हालांकि फिक्स्ड हेडर,

— रिसाइएबल

बूटस्ट्रैप एक कठिन निर्भरता है? मैं चाहूंगा कि मेरा ग्रिड कस्टम सीएसएस का उपयोग करे। मुमकिन?

— जसदीप सिंह

इसके लिए और अधिक पहचान की आवश्यकता है। मैं एनजी-ग्रिड के साथ जाने के करीब था जब तक मुझे एहसास नहीं हुआ कि यह html तालिकाओं का उपयोग भी नहीं कर रहा है।

— रयानविनचेस्टर

Answer 5

इस पोस्ट को पढ़ने वाले किसी के लिए: अपने आप को एक एहसान करो और एनजी-ग्रिड से दूर रहें। कीड़ों से भरा है (वास्तव में .. लिबास के हर हिस्से को किसी भी तरह से तोड़ा जाता है), 3.0 में काम करने के लिए देवताओं ने 2.0.x शाखा का समर्थन छोड़ दिया है जो तैयार होने से बहुत दूर है। अपने आप से समस्याओं को ठीक करना एक आसान काम नहीं है, एनजी-ग्रिड कोड छोटा नहीं है और सरल नहीं है, जब तक कि आपके पास बहुत समय नहीं है और सामान्य रूप से कोणीय और जेएस का गहरा ज्ञान है, यह एक कठिन काम है।

निचला रेखा: बग से भरा है, और अंतिम स्थिर संस्करण को छोड़ दिया गया है।

गितुब पीआरएस से भरा है, लेकिन उन्हें नजरअंदाज किया जा रहा है। और यदि आप 2.x शाखा में बग की सूचना देते हैं, तो यह बंद हो जाता है।

मुझे पता है कि एक ओपन सोर्स प्रॉक्ट है और शिकायतें थोड़ी जगह से बाहर हो सकती हैं, लेकिन एक पुस्तकालय की तलाश करने वाले डेवलपर के दृष्टिकोण से, मेरी राय है। मैंने एक बड़े प्रॉजेक्ट में एनजी-ग्रिड के साथ काम करने में कई घंटे बिताए और सिर दर्द कभी खत्म नहीं हुआ

Comments

क्या आप हमें इन बगों / परिदृश्यों के कुछ उदाहरण बता सकते हैं जिन्होंने आपको सिरदर्द दिया है? मेरी दिलचस्पी इसलिए है क्योंकि एक जाने-माने विकल्प (एनजी-ग्रिड, ट्रएनजीग्रिड, एनजी-टेबल, स्मार्टटेबल) में से एक को चुनने के लिए मैं बस एनजी-ग्रिड से शुरू कर रहा हूं और आपके पोस्ट को पढ़ने और 10 अपवॉट्स देखने के बाद मैं बस डर गया!

— खेल

खैर, उनमें से कुछ तय हो गए मुझे विश्वास है, वे 20 पुल अनुरोध की तरह विलीन हो गए जो महीनों से वहां बैठे थे। मुझे जो समस्याएँ थीं? उनमें से कई कारण थे कि वे ग्रिड मेकअप के लिए टेबल के बजाय डिव का उपयोग करते थे। इसके अलावा, जिन घटनाओं से ग्रिड का पर्दाफाश होता है, वे छोटी-छोटी समस्याएं हैं, जो मुझे बहुत परेशानियां देती हैं क्योंकि मैं व्यवहार की तरह एक अनंत-स्क्रॉल को लागू कर रहा था, स्क्रॉल इवेंट को कुछ परिस्थितियों में बेतरतीब ढंग से फायरिंग करना चाहिए था जो नहीं करना चाहिए। कॉलम ऑटो-चौड़ाई बिल्कुल काम नहीं करता है।

— अग्लुस

अंत में, यह निर्भर करेगा कि आप ग्रिड का उपयोग कैसे करना चाहते हैं, और आपके प्रोजेक्ट में आवश्यक अनुकूलन का स्तर। गीथूब की जांच करें, खुले मुद्दों को पढ़ें, कुछ डेमो बनाएं जो आपके सभी उपयोग के मामलों को कवर करते हैं और देखें कि यह कैसे काम करता है। लेकिन याद रखें, 2.x शाखा देव को छोड़ दिया गया है, इसलिए आपको भविष्य में शून्य समर्थन मिलेगा।

— अग्लुस

Answer 6

TrNgGrid अब तक बहुत अच्छा काम कर रहा है। यहां वे कारण हैं जो मैं इसे एनजी-ग्रिड के लिए पसंद करता हूं और इस घटक पर चला गया

• यह टेबल एलिमेंट्स बनाता है ताकि इसे बूटवॉच किया जा सके और बूटस्ट्रैप की सभी पावर का उपयोग किया जा सके। (एनजी ग्रिड jQuery यूआई थीम का उपयोग करता है)।

• सरल, अच्छी तरह से प्रलेखित ग्रिड विकल्प।

• सर्वर आकार पेजिंग काम करता है

Answer 7

इस सवाल के जवाब के अंत में कि कोणीय में सोचना कैसे है यदि आपके पास एक jQuery पृष्ठभूमि है, तो जोश डेविड मिलर का शीर्ष पद सारांशित करता है:

JQuery का भी उपयोग न करें। इसे भी शामिल न करें। यह आपको वापस पकड़ लेगा। और जब आपको कोई समस्या आती है, तो आपको लगता है कि आप जानते हैं कि jQuery में पहले से ही कैसे हल करना है, इससे पहले कि आप पहुंचें, यह $सोचने की कोशिश करें कि इसे AngularJS के भीतर कैसे करना है। यदि आप नहीं जानते, पूछें! 20 में से 19 बार, इसे करने का सबसे अच्छा तरीका jQuery की आवश्यकता नहीं है और आपके लिए अधिक काम में jQuery के परिणामों के साथ इसे हल करने का प्रयास करना है।

अब यदि आप अनुकूलन के लिए सुविधाओं और विकल्पों के टन के साथ एक ग्रिड चाहते हैं, तो jQuery DataTables सबसे अच्छे में से एक है। कोणीय केवल ग्रिड मैंने देखा है जो jQuery DataTables के करीब नहीं आ सकता है।

हालाँकि , jQuery DataTables AngularJS के साथ अच्छी तरह से एकीकृत नहीं है। (विभिन्न प्रयास हुए हैं, लेकिन कोई भी सहज एकीकरण प्रदान नहीं करता है।)

शायद कि दो विकल्पों के साथ एक व्यक्ति को छोड़ देता है।

सबसे पहले एक शुद्ध कोणीय ग्रिड के साथ जाना है जो डेटाटेबल्स की तरह समृद्ध नहीं है। मैं @Moonstom से सहमत हूँ कि वहाँ से बाहर अन्य कोणीय ग्रिड से तंग आकर, और trNgGrid अच्छा लग रहा है।

कहने के लिए दूसरा विकल्प है: यह उन 20 मामलों में से दुर्लभ 1 है जहां आपको jQuery का उपयोग करना चाहिए और jQuery के डेटाटेबल प्लग-इन के साथ जाना चाहिए , क्योंकि शुद्ध कोणीय ग्रिड के साथ पहिया को फिर से आविष्कार करने के प्रयासों से उपज हुई है DataTables की तुलना में कम मजबूत पहिया।

यह अच्छा होगा यदि यह अन्यथा था, लेकिन मैंने अभी तक नहीं देखा है कि कोणीय पारिस्थितिकी तंत्र jQuery DataTables के रूप में एक मजबूत ग्रिड के साथ आता है, और ऐसा नहीं है कि एक अच्छा डेटा ग्रिड एक वेब ऐप में एक अच्छा-से-है : एक अच्छा ग्रिड एक आवश्यक है।

Comments

+1 सच है। एक शर्म कि DataTables अभी तक एकीकृत नहीं किया गया है; बहुत मुश्किल से डोम के लिए युग्मित शायद।

— सीएसएसियन

इस l-lin.github.io/angular-datatables

— क्रेग

Answer 8

आप बूटस्ट्रैप 3 वर्गों का उपयोग कर सकते हैं और एनजी-दोहराने निर्देश का उपयोग करके एक तालिका का निर्माण कर सकते हैं

उदाहरण:

angular.module('App', []);

function ctrl($scope) {
    $scope.items = [
        ['A', 'B', 'C'],
        ['item1', 'item2', 'item3'],
        ['item4', 'item5', 'item6']
    ];
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

लाइव उदाहरण: http://jsfiddle.net/choroshin/5YDJW/5/

अपडेट करें:

या आप हमेशा लोकप्रिय एनजी-ग्रिड की कोशिश कर सकते हैं , एनजी-ग्रिड सॉर्टिंग, खोज, ग्रुपिंग आदि के लिए अच्छा है, लेकिन मैंने बड़े पैमाने पर डेटा पर अभी तक इसका परीक्षण नहीं किया है।

Comments

हां, यह कोणीय में छांटना, अंकुरण, फ़िल्टरिंग, अजाक्स रिलेटेडिंग आदि के बिना तालिका बनाने का मानक तरीका है। लेकिन हजारों पंक्तियों के साथ यह किसी भी आवेदन को पीसने वाले पड़ाव में लाएगा।

— मिंगुय

यह बहुत ही कम यूआई के परिणामस्वरूप होगा।

— बोई_चोस

Answer 9

एडप्ट-स्ट्रैप । यहाँ है बेला ।

यह बेहद हल्का है और इसमें डायनेमिक रो हाइट है।

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

Comments

क्या स्तंभों की चौड़ाई बदलना संभव है?

— टॉमाज़ वास्ज़किन

Answer 10

जैसा कि अन्य उत्तरों में उल्लेख किया गया है: खोज के साथ एक तालिका के लिए, " एनजी-ग्रिड " का चयन और पृष्ठांकन सबसे अच्छा विकल्प है। मैं जिन चीजों को लेकर आया हूं, उनका उल्लेख करता हूं, जो लागू करते समय उपयोगी हो सकते हैं:

एनवी सेट करने के लिए:

1. JSON डेटा उत्पन्न करने के लिए http://www.json-generator.com/ । अपने नमूना डेटा को तेजी से विकास के लिए सेट करने के लिए इसका एक बहुत अच्छा उपकरण है।

2. आप अपने कार्यान्वयन के लिए इस प्लंकर की जांच कर सकते हैं। मुझे शामिल करने के लिए संशोधित किया गया है: खोज, चयन और पृष्ठांकन http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

आप स्मार्ट टेबल के बारे में इस ट्यूटोरियल की जांच कर सकते हैं, आपको आवश्यक सभी जानकारी देता है: http://lorenzofox3.github.io/smart-table-website/

फिर अगला सवाल यह है bootstrap 3: इसकी बिल्कुल नहीं, लेकिन यह टेम्पलेट अच्छा लग रहा है। - आप बस https://github.com/angular-ui/bootstrap/tree/master/template का उपयोग कर सकते हैं सभी टेम्पलेट अच्छी तरह से लिखे गए हैं।

मैं बूटस्ट्रैप 3 को कोणीयज में कैसे परिवर्तित कर सकता हूं, इसके बारे में निम्नलिखित लिंक में पहले ही उल्लेख किया गया है:

• बूटस्ट्रैप 3 वर्तमान AngularJS बूटस्ट्रैप निर्देशों के साथ संगत है?
• https://github.com/angular-ui/bootstrap/issues/331

कृपया ध्यान दें कि स्मार्ट-टेबल के संबंध में आपको यह देखना होगा कि क्या यह आपके कोणीय संस्करण के लिए तैयार है

Answer 11

Kendo ग्रिड अच्छी होने के साथ-साथ Wijmo भी है। मुझे पता है कि केंडो अपने डेटा स्रोत के लिए कोणीय बाइंडिंग के साथ आता है और मुझे लगता है कि विजमो में एक कोणीय प्लगइन है। न ही हालांकि स्वतंत्र हैं।

Comments

मुझे केन्डोयू के साथ एक भयानक अनुभव हुआ है। यह इतना फूला हुआ है कि यह एक कुत्ते की तरह चलता है और अधिक जटिल घटकों के लिए एक साथ इतना हैक किया गया प्रतीत होता है कि यह मुश्किल है कि अगर "बॉक्स से बाहर" उपलब्ध नहीं हैं, तो काम करने के लिए सुविधाओं को प्राप्त करना असंभव नहीं है। यह भी अपने सर्वर घटकों के साथ काम करने के लिए बहुत अधिक तैयार है और बहुत खराब रूप से किनारे के मामलों के लिए प्रलेखित है। मैं उनसे बहुत दूर रहूँगा!

— प्रीस्टैस्टिकल