AngularJS - lọc phức tạp dựa trên các danh mục vv

Question

Tôi đã thực hiện một số google-fu nhưng tất cả những gì tôi có thể tìm thấy về bộ lọc AngularJS là các ví dụ đơn giản về các bộ lọc đơn giản (chủ yếu là giá trị của một trường).

Những gì tôi sau khi thoguh có phần phức tạp hơn và tôi tìm kiếm sự trợ giúp về cách giải quyết tình huống của tôi.

Hãy tưởng tượng bạn có một mảng của các đối tượng JSON sau:

{ 
    "id":"1", 
    "title":"Title", 
    "categories":[ 
     {"id":"14","name":"DIY"} 
    ], 
    "topics":[ 
     {"id":"12","name":"Junk Food"} 
    ] 
}, 
{ 
    "id":"2", 
    "title":"Title 2", 
    "categories":[ 
     {"id":"4","name":"Test"}, 
     {"id":"14","name":"DIY"}, 
    ], 
    "topics":[ 
     {"id":"2","name":"Food"} 
    ] 
} 

[...] 

nên về cơ bản mỗi đối tượng có thể có bất kỳ số "loại" và/hoặc "chủ đề".

Bây giờ, mục tiêu của tôi là tạo giao diện giao diện người dùng cho phép tôi áp dụng tổng hợp các loại bộ lọc khác nhau cho các đối tượng JSON đó.

Ví dụ: tôi muốn nói: chỉ hiển thị các mục có category.id = 14 AND topic.id = 2 [etc] và vẫn hỗ trợ liên kết sâu cho kết quả được lọc.

Vì vậy, đây là nơi mà tôi bị mắc kẹt:

1) cách tốt nhất để sử dụng các tuyến đường cho điều này là những gì (tức là cách bạn sẽ cấu trúc URL để hỗ trợ bất kỳ số bộ lọc (dựa trên các giá trị khác nhau)

2) Tôi nên theo dõi các bộ lọc được thêm vào như thế nào? (Ví dụ, có bao nhiêu và bộ lọc đã được chọn bởi người sử dụng)

Nhìn vào tài liệu cho AngularJS filters tôi sẽ mặc nhiên sử dụng ví dụ 2 cho tham số lọc:

Object: Một đối tượng mẫu có thể được sử dụng để lọc các thuộc tính cụ thể trên các đối tượng chứa trong mảng. Ví dụ: thuộc tính {name: "M", phone: "1"} sẽ trả về một mảng các mục có tên thuộc tính có chứa "M" và điện thoại thuộc tính có chứa "1". Một tên thuộc tính đặc biệt $ có thể được sử dụng (như trong {$: "text"}) để chấp nhận một trận đấu với bất kỳ thuộc tính nào của đối tượng. Điều đó tương đương với chuỗi con phù hợp đơn giản với một chuỗi như mô tả ở trên.

Nhưng tôi không như vậy chắc chắn về cách làm cho chắc chắn tôi đang kiểm tra các lĩnh vực bên phải (tức là topic.id cho các chủ đề vs category.id cho loại) ...

một cách đơn giản, tôi 'd thích xem một ví dụ cho một kịch bản lọc ít tầm thường như vậy.

Answer 1

Tôi nghĩ bạn cần một cái gì đó như this thay thế. Xem 'thay thế đơn giản khác' của anh ấy. Tôi làm lọc phức tạp trong một dịch vụ được tiêm vào bộ điều khiển của tôi và hiển thị danh sách được lọc trên phạm vi $ của tôi cho Chế độ xem. Tôi chỉ sử dụng các bộ lọc Góc cho các nhiệm vụ tương đối đơn giản.

Câu hỏi về cách hiển thị URL này trên URL, bạn sẽ cần một số cách biểu diễn các bộ lọc đó dưới dạng chuỗi và có thể sử dụng $ location và $ routeParams để đưa chúng vào bộ điều khiển của bạn.

Answer 2

Điều này có thể có tác dụng nếu bạn viết một bộ lọc tùy chỉnh:

var module = angular.module('app', []); 

module.filter("property", ["$filter", function($filter){ 
    var parseString = function(input){ 
     return input.split("."); 
    } 

    function getValue(element, propertyArray) { 
     var value = element; 

     angular.forEach(propertyArray, function(property) { 
      value = value[property]; 
     }); 

     return value; 
    } 

    return function (array, propertyString, target) { 
     var properties = parseString(propertyString); 

     return $filter('filter')(array, function(item){ 
      return getValue(item, properties) == target; 
     }); 
    } 
}]); 

phần HTML có thể trông như thế này:

<ul>   
    <li ng-repeat="data in items | property:'categories.id':<id_of_a_category_we_want>"> 
     {{ data }} 
    </li> 
</ul> 

Credit: OnOFF-Switch blog