Lọc nhiều mảng trong nhiều danh sách định nghĩa với AngularJS

Question

Tôi muốn lọc dữ liệu trong acordeon có 4 phần. mẫu mã của tôi là dưới đây (tôi đã xóa acordeon mã và một số bộ phận khác nhau trong mã của tôi)

<input type="text" ng-model="searchText" placeholder="Filter"> 
<dl> 
    <dt ng-repeat-start="mainCategory in mainCategories | filter:searchText" > 
     {{mainCategory.Name}} 
    </dt> 
    <dd ng-repeat-end=""> 
     <dl> 
      <dt ng-repeat-start="subCategory in subCategories[mainCategory.ID] | filter:searchText" > 
       {{subCategory.Name}} 
      </dt> 

      <dd ng-repeat-end=""> 
       <dl> 
        <dt ng-repeat-start="lesson in subCategoryLessons[subCategory.ID] | filter:searchText" > 
         {{lesson.Name}} 
        </dt>     
        <dd ng-repeat-end="">       
         <dl> 

          <dt ng-repeat-start="subLesson in subLessons[lesson.ID] | filter:searchText"> 
           {{subLesson.Header}} 
          </dt> 

          <dd ng-repeat-end=""> 
           {{subLesson.Content}} 
          </dd> 
         </dl> 
        </dd> 
       </dl> 
      </dd> 
     </dl> 
    </dd> 
</dl> 

Agriculture, Lesson và SubLesson dữ liệu ngay được đến từ một dịch vụ khác và họ đang tiết kiệm trong các mảng khác nhau.

Tôi muốn lọc dữ liệu trong chế độ xem này bao gồm tất cả dữ liệu. Nhưng nếu tôi viết một số từ trong phần subLesson (loại thấp nhất), tôi phải xem các phần cha (phần tử html) để tiếp cận dữ liệu sublesson thông qua việc mở acordeon.

Tôi có thể tạo bộ lọc như thế này không? Tất cả dữ liệu sẽ đến từ một dịch vụ web có định dạng JSON. Tôi phải xem xét độ trễ ajax.

Answer 1

Ống AFAIK, filter sẽ tìm kiếm trong tất cả các thuộc tính của đối tượng của bạn, với chiều sâu vô hạn.

Do đó bạn có thể áp dụng các bộ lọc để bộ sưu tập đầu tiên, mainCategories, trong ng-repeat đầu tiên, khi và chỉ khi bạn có tất cả bạn subCategories chứa trong đối tượng mainCategories của bạn, và vân vân.

Ví dụ, dữ liệu của bạn sẽ trông như thế này:

mainCategories = [{ 
    subCategories : [{ 
     lessons : [{ 
      subLessons : [{ 
       ... 
      }] 
      ... 
     }] 
     ... 
    }] 
    ... 
}] 

Và bạn sẽ sử dụng nó như thế này:

<dt ng-repeat-start="mainCategory in mainCategories | filter:searchText" > 
     {{mainCategory.Name}} 
    </dt> 
    <dd ng-repeat-end=""> 
     <dl> 
      <dt ng-repeat-start="subCategory in mainCategory.subCategories">