استخدام ng-repeat في AngularJS: دليل شامل لتكرار وعرض البيانات

في هذا السياق، نقدم فهمًا عميقًا حول كيفية استخدام “ng-repeat” في AngularJS مع استخدام مصفوفة. يعتبر “ng-repeat” أحد الأدوات القوية في AngularJS لتكرار عناصر الواجهة الرسومية بناءً على بيانات من مصفوفة معينة. يسهل هذا الأمر تكرار وعرض البيانات بطريقة ديناميكية وفعّالة.

أولاً وقبل كل شيء، يجب عليك التأكد من تضمين AngularJS في مشروعك. يمكنك القيام بذلك عن طريق إضافة الرابط المناسب إلى ملف HTML الخاص بك، على سبيل المثال:

htmlCopy code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">script>

ثم، يمكنك استخدام “ng-repeat” في عنصر HTML لتكرار العناصر. في هذا المثال، يتم تعيين المصفوفة “fullname” إلى متغير نطاق AngularJS “$scope”. هذا يمكن أن يكون داخل وحدة التحكم (Controller) الخاصة بك، كما هو موضح في الكود الذي قدمته:

javascriptCopy code
myApp.controller("myctrl", function($scope) {
    $scope.fullname = [
        { fname: 'Mohil', age: '25', city: 'San Jose', zip:'95112' },
        { fname: 'Darshit', age: '25', city: 'San Jose', zip:'95112'},
        { fname: 'Suchita', age: '25', city: 'Santa Clara', zip:'95182'}
    ];
});

الآن، يمكنك استخدام “ng-repeat” في العنصر HTML لعرض البيانات داخل المصفوفة. على سبيل المثال:

htmlCopy code
<div ng-controller="myctrl">
    <ul>
        <li ng-repeat="person in fullname">
            {{ person.fname }} - {{ person.age }} - {{ person.city }} - {{ person.zip }}
        li>
    ul>
div>

في هذا السياق، يتم تكرار عناصر المصفوفة “fullname” باستخدام “ng-repeat”، ويتم عرض تفاصيل كل فرد في عنصر قائمة. يمكنك تخصيص هذا الكود بحسب احتياجاتك، ويعتبر هذا استخدامًا أساسيًا وفعّالًا لـ “ng-repeat” في AngularJS.

بالتأكيد، يمكننا توسيع فهمنا لكيفية استخدام “ng-repeat” في AngularJS وتقديم مزيد من المعلومات حول الأمور المتعلقة.

“ng-repeat” يعد واحدًا من الأساسيات في AngularJS ويوفر وسيلة قوية لتكرار العناصر وعرضها بطريقة ديناميكية. في المثال السابق، قمنا بتكرار عناصر مصفوفة “fullname” وعرض تفاصيل كل فرد. ومع ذلك، هناك بعض النقاط الإضافية التي يجب أخذها في اعتبارك:

1. ترتيب البيانات:
   يمكنك استخدام “orderBy” لترتيب العناصر وفقًا لخاصية معينة. على سبيل المثال، يمكنك ترتيب الأفراد وفقًا للعمر كما يلي:

   htmlCopy code
   <li ng-repeat="person in fullname | orderBy:'age'">
   

2. تحديد مجال العرض:
   يمكنك استخدام “ng-if” لتحديد مجال العرض بناءً على شرط. على سبيل المثال، يمكنك عرض الأفراد الذين يعيشون في “San Jose” فقط:

   htmlCopy code
   <li ng-repeat="person in fullname" ng-if="person.city === 'San Jose'">
   

3. تعديل البيانات:
   يمكنك استخدام “ng-click” لتنفيذ إجراء عند النقر على عنصر. على سبيل المثال، يمكنك إنشاء دالة لتعديل البيانات عند النقر:

   htmlCopy code
   <li ng-repeat="person in fullname" ng-click="editPerson(person)">
   

4. تعامل مع الفهرس:
   يمكنك الوصول إلى فهرس العنصر باستخدام “$index”. على سبيل المثال، يمكنك عرض رقم الفهرس في القائمة:

   htmlCopy code
   <li ng-repeat="person in fullname">
       {{ $index + 1 }} - {{ person.fname }} - {{ person.age }} - {{ person.city }} - {{ person.zip }}
   li>
   

بهذه الطريقة، يمكنك تكييف استخدام “ng-repeat” وجعل تجربة العرض أكثر تكاملًا وتكاملًا مع احتياجات تطبيقك. يعتبر هذا تمثيلاً لبعض الاستخدامات المفيدة لـ “ng-repeat” في AngularJS، ويمكنك توسيعها بمزيد من الوظائف والتكامل وفقًا لمتطلبات مشروعك الخاص.