تفسير الترشيح والترتيب في AngularJS مع أمثلة على الشيفرة

تمت معرفة كيفية استخدام AngularJS، هنا سنكتب برنامجًا بسيطًا لتحقيق وظائف البحث والإلغاء والإعادة ترتيب.

في هذا البرنامج يمكن معرفة:

　　1 AngularJS المبدأ

　　2 طريقة استخدام ng-repeat

　　3 استخدام التحكمات

　　4 ربط البيانات

　　تحليل تصميم البرنامج

　　أولاً، إذا كان يجب القيام بالتصفية البحثية، فيجب استخدام filter في AngularJS.

　　يمكن استخدام رمز الأمر | في نهاية العبارة، بناءً على الطريقة التالية، يمكن تحقيق تأثير التصفية:

　　من خلال استخدام filter يمكن تحقيق عملية تصفية، query هو النص المدخل للتصفية.

　　مثل ذلك، يمكن تحقيق وظيفة الترتيب باستخدام orderBy:

　　البحث والترتيب المذكور أعلاه يتضمن متغيرين، query وorder. يمكن استخدام ng-model مباشرة لتحقيق ربط البيانات هنا:

      البحث:<input ng-model="query">
      ترتيب بحسب:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>

　　AngularJS هو لغة إطار عمل قائم على DOM، لذا لا تحتاج إلى تنفيذ أي مستمعين أو محفزات، عند تغيير أي شيء في مربع الإدخال الخاص بquery، يتم إطلاق تحديث دوتواي بين مربع الإدخال والعبارة المقدمة أدناه!

　　مقارنة بالعديد من إطارات العمل الأخرى، تعتمد على إضافة DOM من خلالinnerHTML بناءً على الأنماط، يتم تسريع عرض نموذج AngularJS وتصور العرض. كما يتم تقليل كتابة الكثير من الكود غير الضروري مثل المستمعين والتحكمات، وتحقق فعلاً تأثير تشابه spring!

　　عرض البيانات يمكن تحقيقه من خلال ng-repeat. عند تفسير الصفحة إلى ng-repeat، يتم نسخ كل عنصر من array وتركيبه وتحليله.　　　

　　　<ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>

　　بقية العمل يتطلب إعداد array من persons في script:　　　

  <div ng-controller="ctl">
          ...
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"name":"wangwu","age":30}
        ];
        $scope.order = "age";
      }
    </script>

　　الشيفرة والنتائج

　　أضف الأن كامل الشيفرة:

<!doctype html>
<html ng-app>
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>
    <div ng-controller="ctl">
      البحث:<input ng-model="query">
      ترتيب بحسب:<select ng-model="order">
        <option value="name">name</option>
        <option value="age">age</option>
      </select>
      <ul class="persons">
        <li ng-repeat="person in persons | filter:query | orderBy:order">
          {{person.name}}
          {{person.age}}
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function ctl($scope){
        $scope.persons = [
          {"name":"xingoo","age":25},
          {"name":"zhangsan","age":18},
          {"name":"lisi","age":20},
          {"name":"wangwu","age":30}
        ];
        $scope.order = "age";
      }
    </script>
  </body>
</html>

　　نتيجة الاستخدام:

　　بالتقديم، سيتم ترتيب age

　　باختيارك يمكنك استخدام ترتيب الاسم

　　عند إدخال النص، سيتم تلقائيًا تصفية بعض الخيارات

هذا هو جمع المعلومات حول تصفية وتسلسل AngularJS، سيتم إكمال المزيد من المعلومات ذات الصلة لاحقاً، شكراً لكم على دعم هذا الموقع!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية المحتوى لصاحب الحقوق، تم جمع المحتوى من قبل المستخدمين على الإنترنت وتم تحميله بشكل تلقائي، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فوراً.

دليل الأساسيات

أنت قد تحبها