arrays - AngularJS وظيفة مرشح مخصص




filter controller (4)

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

حاولت استخدام $filter('filter')(array, function) تنسيق $filter('filter')(array, function) لكنني لا أعرف كيفية الوصول إلى العناصر الفردية للمصفوفة داخل وظيفتي. إليك مقتطف لإظهار ما أريد.

$filter('filter')(array, function() {
  return criteriaMatch(item, criteria);
});

ثم في criteriaMatch() ، سوف أتحقق مما إذا كان كل من الخاصية الفردية مطابقًا

var criteriaMatch = function(item, criteria) {
  // go thro each individual property in the item and criteria
  // and check if they are equal
}

لا بد لي من القيام بكل ذلك في وحدة تحكم وتجميع قائمة من القوائم وتعيينها في النطاق. لذلك أحتاج إلى الوصول إلى $filter('filter') بهذه الطريقة فقط. كل الأمثلة التي وجدتها في الشبكة حتى الآن تحتوي على معايير ثابتة تبحث داخل الوظيفة ، ولا تقوم بتمرير كائن معيار واختبار ضد كل عنصر في الصفيف.


Answers

يمكنك استخدامه على http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview : http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

كما عثرت عليه ، يقبل filter دالة المسند الذي يقبل عنصرًا حسب العنصر من الصفيف. لذلك ، عليك فقط إنشاء دالة دالة استنادًا إلى criteria .

في هذا المثال ، تعتبر criteriaMatch دالة تقوم بإرجاع دالة دالة تقييم مطابقة criteria .

قالب:

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

نطاق:

$scope.criteriaMatch = function( criteria ) {
  return function( item ) {
    return item.name === criteria.name;
  };
};

في ما يلي مثال لكيفية استخدام filter داخل جافا سكريبت AngularJS (بدلاً من استخدام عنصر HTML).

في هذا المثال ، لدينا مجموعة من السجلات القطرية ، تحتوي كل منها على اسم ورمز ISO مكون من 3 أحرف.

نريد أن نكتب دالة تبحث من خلال هذه القائمة عن سجل يتطابق مع رمز 3 أحرف محدد.

إليك كيف سنقوم بذلك دون استخدام filter :

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.
    for (var i = 0; i < $scope.CountryList.length; i++) {
        if ($scope.CountryList[i].IsoAlpha3 == CountryCode) {
            return $scope.CountryList[i];
        };
    };
    return null;
};

نعم ، لا بأس بذلك.

ولكن إليك كيفية ظهور الوظيفة نفسها ، باستخدام filter :

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.

    var matches = $scope.CountryList.filter(function (el) { return el.IsoAlpha3 == CountryCode; })

    //  If 'filter' didn't find any matching records, its result will be an array of 0 records.
    if (matches.length == 0)
        return null;

    //  Otherwise, it should've found just one matching record
    return matches[0];
};

أكثر إتقانا.

تذكر أن filter يعرض مصفوفة كنتيجة (قائمة بسجلات مطابقة) ، لذلك في هذا المثال ، سنقوم إما بإرجاع سجل واحد ، أو NULL.

أتمنى أن يساعدك هذا.


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

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

يمكنك فعل شيء مثل:

var filteredItems =  $scope.$eval('items | filter:filter:criteriaMatch(criteria)');

استمع إلى البودكاست JavaScript Jabber: Episode # 32 الذي يتميز بالمبدعين الأصليين لـ AngularJS: Misko Hevery & Igor Minar. يتحدثون كثيرًا حول ما يشبه القدوم إلى AngularJS من خلفيات جافا سكريبت الأخرى ، وخاصة jQuery.

إحدى النقاط الواردة في البودكاست جعلت الكثير من الأشياء تنقر فوقي بالنسبة لسؤالك:

MISKO : [...] واحدة من الأشياء التي فكرت في بالكاد في Angular ، كيف يمكننا توفير الكثير من hatch الهروب بحيث يمكنك الخروج وأساسا معرفة طريقة للخروج من هذا. بالنسبة لنا ، فإن الجواب هو هذا الشيء الذي يطلق عليه "التوجيهات". ومع التوجيهات ، فإنك تصبح جوهريا جافا سكريبت jQuery عادي ، يمكنك القيام بكل ما تريد.

IGOR : لذلك فكر في التوجيه كتعليمات إلى المحول البرمجي الذي يخبره عندما تصادف هذا العنصر المعين أو هذا CSS في القالب ، وتحافظ على هذا النوع من الكود وهذا الرمز هو المسؤول عن العنصر وكل شيء أسفل هذا العنصر في شجرة DOM.

نص النسخة الكاملة متاح على الرابط المقدم أعلاه.

لذا ، للإجابة على سؤالك بشكل مباشر: AngularJS -رائع-هو إطار MV * حقيقي. ومع ذلك ، لا يزال بإمكانك تنفيذ جميع الأشياء الرائعة حقًا التي تعرفها وتحبها باستخدام jQuery داخل التوجيهات. إنها ليست مسألة "كيف أفعل ما اعتدت عليه في jQuery؟" بقدر ما يتعلق الأمر بـ "كيف أقوم بتضمين AngularJS مع كل الأشياء التي اعتدت القيام بها في jQuery؟"

انها حقا دولتين مختلفتين جدا للعقل.







arrays angularjs filter controller