AngularJs में शब्दकोशों के लिए एनजी-रिपीट का उपयोग कैसे करें?

Question

मुझे पता है कि हम आसानी से जिन वस्तुओं या सरणियों के लिए एनजी-रिपीट का उपयोग कर सकते हैं :

<div ng-repeat="user in users"></div>

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

var users = null;
users["182982"] = "{...json-object...}";
users["198784"] = "{...json-object...}";
users["119827"] = "{...json-object...}";

मैं इसका उपयोग उपयोगकर्ताओं के साथ करना चाहता हूं:

<div ng-repeat="user in users"></div>

क्या यह संभव है?। यदि हाँ, तो मैं इसे AngularJs में कैसे कर सकता हूँ?

मेरे प्रश्न के लिए उदाहरण: C # में हम शब्दकोशों को इस तरह परिभाषित करते हैं:

Dictionary<key,value> dict = new Dictionary<key,value>();

//and then we can search for values, without knowing the keys
foreach(var val in dict.Values)
{
}

क्या कोई बिल्ड-इन फ़ंक्शन है जो सी # जैसे शब्दकोश से मान लौटाता है?

Comments

डिक्शनरी और JSON ऑब्जेक्ट में क्या अंतर है? मेरा मानना ​​है कि जावास्क्रिप्ट में कोई नहीं है!

— निशानमारिजनीसेन

@markmarijnissen: JSON ऑब्जेक्ट में जावास्क्रिप्ट ऑब्जेक्ट की तुलना में अधिक कड़े वाक्यविन्यास नियम होते हैं । और, जैसा कि हम पहले से ही पेडेंट कॉर्नर में हैं, जावास्क्रिप्ट में "शब्दकोश" जैसी कोई चीज नहीं है। हम उन्हें सिर्फ वस्तु कहते हैं।

— पॉल डी। वेइट

Answer 1

आप उपयोग कर सकते हैं

<li ng-repeat="(name, age) in items">{{name}}: {{age}}</li>

NgRepeat प्रलेखन देखें । उदाहरण: http://jsfiddle.net/WRtqV/1/

Comments

यह वह नहीं है जो मैंने पूछा था, बल्कि मुझे जो चाहिए था, वह है। धन्यवाद आर्टेम एंड्रीव

— वुरेल

हम इस एनजी-रिपीट में फ़िल्टर का उपयोग कैसे कर सकते हैं। यह मेरे मामले में काम नहीं कर रहा है जब मैं एक खोज फ़िल्टर का उपयोग कर रहा हूं। आइटम में <इनपुट प्रकार = "टेक्स्ट" एनजी-मॉडल = "सर्चटेक्स्ट" /> <ली एनजी-रिपीट = "(नाम, आयु) कहें। फ़िल्टर: सर्चटेक्स्ट"> {{नाम}}: {{उम्र}} </ ली> ...

— शेखर

@ शेखर फ़िल्टर "फ़िल्टर" केवल सरणियों के साथ काम करता है। आप सुविधा अनुरोध बनाने का प्रयास कर सकते हैं।

— आर्टेम एंड्रीव

अजगर के साथ कुछ समानता देखने के लिए अच्छा है :)

— रोबर्ट राजा

आप ng-if स्टेटमेंट का उपयोग करके शब्दकोशों (ऑब्जेक्ट्स) पर भी फ़िल्टर सुविधा प्राप्त कर सकते हैं .. जैसे उदाहरण के लिए: <li ng-repeat = "(id, obj) आइटम" ng-if = 'obj.sex = "महिला में ">> {{obj.name}} {{obj.surname}} </ li> ... जहां आइटम कुछ कुंजी द्वारा अनुक्रमित व्यक्तियों का एक समूह है।

— जियोविल्ड

Answer 2

मैं AngularJSng-repeat की एक नई कार्यक्षमता का भी उल्लेख करना चाहूंगा , अर्थात्, विशेष दोहराव शुरू और अंत बिंदु । यही कारण है कि कार्यक्षमता के लिए एक दोहराने के लिए में जोड़ा गया श्रृंखला सिर्फ एक के बजाय HTML तत्वों की एकल माता पिता HTML तत्व।

पुनरावर्तक प्रारंभ और अंत बिंदुओं का उपयोग करने के लिए आपको क्रमशः ng-repeat-startऔर ng-repeat-endनिर्देशों का उपयोग करके उन्हें परिभाषित करना होगा।

ng-repeat-startनिर्देश बहुत के समान काम करता है ng-repeatनिर्देश। अंतर यह है कि सभी HTML एलिमेंट्स (टैग जिस पर इसे परिभाषित किया गया है सहित) को समाप्त होने वाले HTML टैग तक ng-repeat-endरखा जाएगा जहां रखा गया है (टैग सहित ng-repeat-end)।

नमूना कोड (एक नियंत्रक से):

// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...

नमूना HTML टेम्पलेट:

<div ng-repeat-start="(id, user) in users">
    ==== User details ====
</div>
<div>
    <span>{{$index+1}}. </span>
    <strong>{{id}} </strong>
    <span class="name">{{user.name}} </span>
    <span class="age">({{user.age}})</span>
</div>

<div ng-if="!$first">
   <img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
    ======================
</div>

आउटपुट निम्न के समान होगा (HTML स्टाइल के आधार पर):

==== User details ====
1.  119827 Stephan (18)
======================
==== User details ====
2.  182982 John (30)
[sample image goes here]
======================
==== User details ====
3.  198784 Antonio (32)
[sample image goes here]
======================

जैसा कि आप देख सकते हैं, ng-repeat-startसभी HTML तत्वों (तत्व सहित ng-repeat-start) को दोहराता है । सभी ng-repeatविशेष गुण (इस मामले में $firstऔर $indexउम्मीद के रूप में) भी काम करते हैं।

Comments

त्रुटि: [$ संकलन: uterdir] असम्बद्ध विशेषता, पाया 'एनजी-रिपीट-स्टार्ट' लेकिन कोई मिलान 'एनजी-रिपीट-एंड' नहीं मिला।

— zloctb

@zloctb को आपने <div ng-repeat-end>..</div>अपने मार्कअप में छोड़ दिया होगा

— जॉन केस्टर

Answer 3

जावास्क्रिप्ट डेवलपर्स एक शब्दकोश के बजाय एक वस्तु या हैश के रूप में उपरोक्त डेटा-संरचना को संदर्भित करते हैं।

उपरोक्त आपका सिंटैक्स गलत है क्योंकि आप usersऑब्जेक्ट को शून्य के रूप में आरम्भ कर रहे हैं । मुझे लगता है कि यह एक टाइपो है, जैसा कि कोड को पढ़ना चाहिए:

// Initialize users as a new hash.
var users = {};
users["182982"] = "...";

हैश से सभी मान प्राप्त करने के लिए, आपको लूप के लिए इसका उपयोग करने की आवश्यकता है:

function getValues (hash) {
    var values = [];
    for (var key in hash) {

        // Ensure that the `key` is actually a member of the hash and not
        // a member of the `prototype`.
        // see: http://javascript.crockford.com/code.html#for%20statement
        if (hash.hasOwnProperty(key)) {
            values.push(key);
        }
    }
    return values;
};

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

var values = _.values(users);

मैं स्वयं कोणीय का उपयोग नहीं करता हूं, लेकिन मुझे पूरा यकीन है कि एक हैश के मूल्यों पर चलने के लिए एक सुविधा विधि का निर्माण होगा (आह, वहां हम जाते हैं, आर्टेम एंड्रीव ऊपर उत्तर प्रदान करता है :))

Comments

+1 अंडरस्कोर के लिए। जेएस और ये उपयोगी informations। थैंक यू जॉनी!

— १६:१२

Answer 4

कोणीय 7 में, निम्नलिखित सरल उदाहरण काम करेगा (शब्दकोष कहलाता है d)

my.component.ts:

keys: string[] = [];  // declaration of class member 'keys'
// component code ...

this.keys = Object.keys(d);

my.component.html: (कुंजी की सूची प्रदर्शित करेगा: मूल्य जोड़े)

<ul *ngFor="let key of keys">
    {{key}}: {{d[key]}}
</ul>