[Javascript] كيفية عرض طول بيانات ng-repeat المفلترة


Answers

للتأكد من اكتمالها ، بالإضافة إلى الإجابات السابقة (إجراء حساب الأشخاص المرئيين داخل وحدة التحكم) ، يمكنك أيضًا إجراء الحسابات في نموذج HTML كما في المثال أدناه.

بافتراض أن قائمة الأشخاص الخاصة بك موجودة في متغير data وتقوم بتصفية الأشخاص باستخدام نموذج query ، سيعمل الرمز التالي من أجلك:

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>
  • {{data.length}} - يطبع العدد الإجمالي للأشخاص
  • {{(data|filter:query).length}} - يطبع عددًا تمت تصفيته من الأشخاص

لاحظ أن هذا الحل يعمل بشكل جيد إذا كنت تريد استخدام البيانات التي تمت تصفيتها مرة واحدة فقط في الصفحة. ومع ذلك ، إذا كنت تستخدم بيانات مفلترة أكثر من مرة على سبيل المثال لعرض العناصر وإظهار طول القائمة التي تمت تصفيتها ، فإنني أقترح استخدام تعبير الاسم المستعار (الموضح أدناه) لـ AngularJS 1.3+ أو الحل المقترح بواسطة Wumms لإصدار AngularJS قبل 1.3.

ميزة جديدة في Angular 1.3

لاحظ أيضًا منشئو AngularJS تلك المشكلة وفي الإصدار 1.3 (بيتا 17) أضافوا تعبيرًا "مستعارًا" والذي سيخزن النتائج المتوسطة للمكرر بعد تطبيق الفلاتر على سبيل المثال

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

سيمنع تعبير الاسم المستعار مشكلة تنفيذ عامل تصفية متعددة.

وآمل أن يساعد.

Question

لدي صفيف بيانات يحتوي على العديد من الكائنات (تنسيق JSON). يمكن افتراض ما يلي كمحتويات هذا المصفوفة:

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

الآن ، أعرض هذه التفاصيل على النحو التالي:

<div ng-repeat="person in data | filter: query">
</div

هنا ، يتم تصميم نموذج إلى حقل إدخال يمكن للمستخدم من خلاله تقييد البيانات المعروضة.

الآن ، لديّ موقع آخر أعرض به العدد الحالي للأشخاص / الأشخاص الذين يتم عرضهم ، أي Showing {{data.length}} Persons

ما أريد فعله هو أنه عندما يبحث المستخدم عن شخص ويتم ترشيح البيانات المعروضة استنادًا إلى الاستعلام ، فإن Showing...persons تم عرضهم يغيرون أيضًا قيمة الأشخاص الذين يتم عرضهم حاليًا. لكن هذا لا يحدث. يعرض دائمًا إجمالي الأشخاص في البيانات بدلاً من البيانات التي تمت تصفيتها - كيف يمكنني الحصول على عدد البيانات التي تمت تصفيتها؟




يمكنك القيام بذلك بطريقتين . في قالب وفي وحدة تحكم . في القالب ، يمكنك ضبط صفيفك المفلتر إلى متغير آخر ، ثم استخدامه كما تريد. إليك كيفية القيام بذلك:

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

إذا كنت بحاجة إلى أمثلة ، فراجع أمثلة / عروض التوضيحية التي تمت تصفيتها في AngularJs




من المفيد أيضًا ملاحظة أنه يمكنك تخزين مستويات متعددة من النتائج عن طريق تجميع الفلاتر

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

وهنا عزف عرضي




منذ AngularJS 1.3 يمكنك استخدام الأسماء المستعارة:

item in items | filter:x as results

ومكان ما:

<span>Total {{results.length}} result(s).</span>

من المستندات :

يمكنك أيضًا توفير تعبير بديل للاسم المستعار والذي سيخزن النتائج المتوسطة للمكرر بعد تطبيق الفلاتر. عادة ما يتم استخدام هذا لتقديم رسالة خاصة عندما يكون عامل التصفية نشطًا على المكرر ، لكن مجموعة النتائج التي تمت تصفيتها فارغة.

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