it-swarm.asia

كيف يمكنني تصفية صفيف باستخدام AngularJS تثبيت خاصية للكائن المصفى كسمة طراز ng؟

إذا كان لدي مجموعة من الكائنات ، وأرغب في ربط النموذج Angular بخاصية أحد العناصر المستندة إلى مرشح ، كيف يمكنني القيام بذلك؟ يمكنني شرح أفضل مع مثال ملموس:

HTML:

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

مراقب:

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

JSBin: http://jsbin.com/adisax/1/edit

أريد تصفية الإدخال الثاني للموضوع مع التقدير "C" ، لكنني لا أريد ربط النموذج بـ grade ؛ أريد ربطه بـ العنوان للموضوع الذي يحتوي على درجة "C".

هل هذا ممكن ، وإذا كان الأمر كذلك ، كيف يتم ذلك؟

116
Bernhard Hofmann
<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>
121
JB Nizet

يمكنك استخدام عامل التصفية "filter" في وحدة التحكم الخاصة بك للحصول على جميع الدرجات "C". الحصول على العنصر الأول من صفيف النتائج سيمنحك title الموضوع الذي يحتوي على الدرجة "C".

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

الشيء نفسه مع ES6 عادي:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]
151
Oliver

هنا JSBin المعدلة مع عينة العمل:

http://jsbin.com/sezamuja/1/edit

هنا هو ما فعلته مع المرشحات في الإدخال:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">
59
lukeatdesignworks

يرجى ملاحظة ، إذا كنت تستخدم فلتر $ مثل هذا:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

وحدث أنك حصلت على درجة أخرى ، أوه ، أنا لا أعلم ، أو CC أو AC أو C + أو CCC. تحتاج إلى إلحاق شرط لمطابقة تامة:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

هذا قتلني حقًا عندما كنت أسحب بعض تفاصيل العمولات مثل هذا:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

فقط اتصل للحصول على خطأ لأنه تم سحب معرف العمولة 56 بدلاً من 6.

مضيفا القوى الحقيقية مباراة بالضبط.

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

ومع ذلك ، أفضل هذا (يمكنني استخدام TypeScript ، ومن هنا "Let" و =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

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

12
Daniel Morris

إذا أردت إنشاء قائمة منفصلة بالنتائج في وحدة التحكم ، فيمكنك تطبيق مرشح

function MyCtrl($scope, filterFilter) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
  //create a filtered array of results 
  //with grade 'C' or subjects that have been failed
  $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

ثم يمكنك الرجوعفشلالموادبنفس الطريقة التي يمكنك بها الرجوع إلىنتائجكائن

يمكنك قراءة المزيد عنها هنا https://docs.angularjs.org/guide/filter

لأن هذه الإجابة الزاويّة قد حدّثت الوثائق التي يوصون بها الآن باستدعاء المرشح

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});
11
Kieran

إذا كنت تستخدم ES6 ، فيمكنك:

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

لاحظ أيضًا أن فلتر التصفية لا يقوم بتحديث المصفوفة الحالية ، بل سيعيد صفيفًا جديدًا مُصفى في كل مرة.

3
Diego Venâncio

يمكنك أيضًا use وظائف مع $filter('filter'):

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});
2
Nelu

تطبيق عامل التصفية نفسه في HTML مع أعمدة متعددة ، فقط مثال:

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)
0
Amay Kulkarni