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 এ করতে পারি?

আমার প্রশ্নের উদাহরণ: সি # তে আমরা এর মতো অভিধানের সংজ্ঞা দিই:

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 অবজেক্টের মধ্যে পার্থক্য কী? আমি বিশ্বাস করি জাভাস্ক্রিপ্টে কেউ নেই!

— চিহ্নিতমারিজনিসেন

@ মার্কারিজনিসেন: একটি JSON অবজেক্টে জাভাস্ক্রিপ্ট অবজেক্টের চেয়ে আরও কড়া সিনট্যাক্স বিধি রয়েছে । এবং, যেমনটি আমরা ইতিমধ্যে পেডেন্টস কর্নারে রয়েছি, জাভাস্ক্রিপ্টে "অভিধান" বলে কিছুই নেই। আমরা তাদেরকে কেবল বস্তু বলি।

— পল ডি ওয়েট

Answer 1

তুমি ব্যবহার করতে পার

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

এনজিপিপিট ডকুমেন্টেশন দেখুন । উদাহরণ: http://jsfiddle.net/WRtqV/1/

Comments

এটি আমি যা চেয়েছিলাম তা নয় বরং আমি যা চেয়েছিলাম তা স্পষ্টভাবে জানিয়েছি। ধন্যবাদ আর্টেম অ্যান্ড্রিভ

— ভোরাল

আমরা এই এনজি-রিপিটে ফিল্টারটি কীভাবে ব্যবহার করতে পারি। যখন আমি কোনও অনুসন্ধান ফিল্টার ব্যবহার করি তখন এটি আমার ক্ষেত্রে কাজ করে না। আইটেমগুলিতে <ইনপুট টাইপ = "পাঠ্য" এনজি-মডেল = "অনুসন্ধানের পাঠ্য" /> <li এনজি-রিপিট = "(নাম, বয়স) বলুন | ফিল্টার: অনুসন্ধানটেক্সট"> {{নাম}: {{বয়স}} </ li> ...

— শেখর

@ শেখর ফিল্টার "ফিল্টার" কেবল অ্যারে নিয়ে কাজ করে। আপনি বৈশিষ্ট্য অনুরোধ তৈরি করার চেষ্টা করতে পারেন।

— আর্টেম আন্দ্রেভ

পাইথনের সাথে কিছু সাধারণতা দেখতে ভাল :)

— রবার্ট রাজা

এনজি-ইফ স্টেটমেন্ট ব্যবহার করে আপনি অভিধানে (অবজেক্টস) ফিল্টার বৈশিষ্ট্য পেতে পারেন .. উদাহরণস্বরূপ: আইটেমগুলিতে <লি এনজি-রিপিট = "(আইডি, আপত্তি)" এনজি-ইফ = 'আপজেক্সেস = "মহিলা "'>। {জেজ.নেম}} {{জেজ.সর্নাম}} </li> ... যেখানে আইটেমগুলি কোনও কী দ্বারা সূচিত ব্যক্তিদের একটি সেট।

— giowild

Answer 2

আমি AngularJS এরng-repeat একটি নতুন কার্যকারিতা উল্লেখ করতে চাই , যথা, বিশেষ পুনরাবৃত্তি আরম্ভ এবং শেষ পয়েন্টগুলি । এই কার্যকারিতাটি কেবলমাত্র একক পিতামাতার এইচটিএমএল উপাদানের পরিবর্তে এইচটিএমএল উপাদানের ধারাবাহিক পুনরাবৃত্তি করতে যুক্ত করা হয়েছিল ।

পুনরাবৃত্তকারী শুরুর এবং শেষ পয়েন্টগুলি ব্যবহার করার জন্য আপনাকে যথাক্রমে ব্যবহার ng-repeat-startএবং ng-repeat-endনির্দেশাবলী দ্বারা সেগুলি সংজ্ঞায়িত করতে হবে ।

ng-repeat-startডিরেক্টিভের খুব অনুরূপ কাজ করে ng-repeatনির্দেশ। পার্থক্য হল যে পুনরাবৃত্তি করবেন হয় সব যেখানে এইচটিএমএল (ট্যাগ এটিতে সংজ্ঞায়িত হয়েছে তা সহ) উপাদান শেষ পর্যন্ত এইচটিএমএল ট্যাগে 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};
// ...

নমুনা এইচটিএমএল টেমপ্লেট:

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

আউটপুট নিম্নলিখিতগুলির মতো দেখাবে (এইচটিএমএল স্টাইলিংয়ের উপর নির্ভর করে):

==== 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সমস্ত এইচটিএমএল উপাদান পুনরাবৃত্তি করে (সহ উপাদানটি সহ ng-repeat-start)। সমস্ত ng-repeatবিশেষ সম্পত্তি (এই ক্ষেত্রে $firstএবং $index) প্রত্যাশার মতোও কাজ করে।

Comments

ত্রুটি: [ile সংকলন: 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। ধন্যবাদ জনি!

— ভোরাল

Answer 4

কৌণিক 7 এ, নিম্নলিখিত সাধারণ উদাহরণটি কাজ করবে (ধরে নিই যে অভিধানটি একটি ভেরিয়েবলের মধ্যে রয়েছে) d ):

my.component.ts:

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

this.keys = Object.keys(d);

my.componal.html: (কীটির তালিকা প্রদর্শন করবে: মান জোড়গুলি)

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