javascript - ngRepeat تصفية حسب الممتلكات العميقة




json angularjs filter angularjs-ng-repeat (5)

إذا كان لدي كائن معقد يحتوي على كائنات كقيم خاصية ، كيف يمكنني التصفية حسب إحدى الخصائص المتداخلة؟

هل يمكن القيام بذلك باستخدام مرشح مرشح OOB-ng؟

البيانات

{
  Name: 'John Smith',
  Manager: {
     id: 123,
     Name: 'Bill Lumburg'
  }
}

ngRepeat

<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>

Answers

للتصفية باستخدام خاصية عميقة متعددة ، نحتاج إلى إنشاء فلتر مخصص. ما أعنيه أننا بحاجة إلى إنشاء وظيفة خاصة بنا لتصفية البيانات في الكائن وإرجاع الكائن المطلوب (كائن تمت تصفيته).

على سبيل المثال ، أحتاج إلى تصفية البيانات من الكائن أدناه -

[
{
   "document":{
      "documentid":"1",
      "documenttitle":"test 1",
      "documentdescription":"abcdef"
       }
},
{
   "document":{
      "documentid":"2",
      "documenttitle":"dfjhkjhf",
      "documentdescription":"dfhjshfjdhsj"
       }
}
]

في HTML ، نستخدم ng-repeat لإظهار قائمة المستندات -

<div>
   //search input textbox
   <input ng-model="searchDocument" placeholder="Search">
 </div>
<div ng-repeat="document in documentList | filter: filteredDocument">
   //our html code 
</div>

في وحدة التحكم ، نكتب وظيفة التصفية لإرجاع الكائن الذي تمت تصفيته باستخدام خاصيتين للعنصر "documenttitle" و "documentdescription" ، مثال التعليمة البرمجية كما يلي:

function filterDocuments(document)
        {
            if($scope.searchDocument)
            {
                     if(document.documentTitle.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1 || document.document.shortDescription.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1)
                {
                    //returns filtered object
                    return document
                }
            }else {
               return document;
            }
        }

حيث $ scope.searchDocument هو متغير النطاق الذي ارتبط بمربع البحث (علامة إدخال HTML) حيث يمكن للمستخدم إدخال النص للبحث.


في أحدث إصدار من angularjs متداخلة تصفية obj تنفيذها افتراضيا. يمكن استخدام مرشح بشكل طبيعي. للزاوية 1 فقط


تحتاج إلى تمرير في الوسيطة لتصفية حسب:

<input ng-model="filter.key">
<ul>
  <li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}">
    {{e.Name}}  (Manager: {{e.Manager.Name}})
  </li>
</ul>

مثال على Plunker


إذا كنت تقوم بتصفية خصائص متعددة ، فسيكون بناء الجملة مماثلاً لما يلي.

<ul>
  <li ng-repeat="item in list | {filter: top_object_property_name: value, top_object_property_with_nested_objects_name: {nested_object_property_name: value}}">
       ...
  </li>
</ul>

على سبيل المثال:

        var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]];

        <li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}">
              ...
        </li>

جرب هذا

delete myObject['key'];




javascript json angularjs filter angularjs-ng-repeat