Chuyển đối số đến bộ lọc anglejs


99

Có thể truyền một đối số cho hàm bộ lọc để bạn có thể lọc theo bất kỳ tên nào không?

Cái gì đó như

$scope.weDontLike = function(item, name) {
    console.log(arguments);
    return item.name != name;
};

Câu trả lời:


223

Trên thực tế, có một giải pháp khác (có thể tốt hơn) nơi bạn có thể sử dụng bộ lọc 'bộ lọc' gốc của góc và vẫn chuyển các đối số vào bộ lọc tùy chỉnh của mình.

Hãy xem xét đoạn mã sau:

<div ng-repeat="group in groups">
    <li ng-repeat="friend in friends | filter:weDontLike(group.enemy.name)">
        <span>{{friend.name}}</span>
    <li>
</div>

Để làm cho việc này hoạt động, bạn chỉ cần xác định bộ lọc của mình như sau:

$scope.weDontLike = function(name) {
    return function(friend) {
        return friend.name != name;
    }
}

Như bạn có thể thấy ở đây, weDontLike thực sự trả về một hàm khác có tham số của bạn trong phạm vi của nó cũng như mục gốc đến từ bộ lọc.

Tôi mất 2 ngày để nhận ra bạn có thể làm được điều này, vẫn chưa thấy giải pháp này ở đâu.

Kiểm tra Phân cực ngược của bộ lọc angle.js để xem cách bạn có thể sử dụng bộ lọc này cho các hoạt động hữu ích khác với bộ lọc.


Trong trường hợp bộ lọc của bạn cần nhiều đối số, hãy xem Làm cách nào để gọi bộ lọc Angular.js có nhiều đối số?
nh2 27/02

Phương pháp này cũng giải quyết một vấn đề kỳ lạ trong đó bên trong ng-repeat, tôi không thể chuyển các tham số của riêng mình vào bộ lọc của mình. Bất kể tôi đã làm gì, chúng vẫn tiếp tục quay trở lại dưới dạng chỉ mục và bộ sưu tập tổng thể. Bằng cách thực hiện phương thức trả về này, tôi đã có thể chuyển các tham số của mình và vẫn tải phần tử ban đầu, sửa lỗi tuyệt vời!
Dennis Smolek

Câu trả lời này đã giải quyết được vấn đề của tôi trong đó tôi không thể chuyển một biến $ scope làm tham số cho hàm bộ lọc. Giải pháp tốt nhất. Đã ủng hộ!
valafar

Nếu tôi có thể ủng hộ điều này nhiều lần, tôi chắc chắn rằng đó là câu trả lời được ủng hộ nhiều nhất trong lịch sử của SO. Điều này đã làm tôi khó chịu trong nhiều năm ... và sau đó tôi tìm thấy câu trả lời (bây giờ 2 tuổi) ... Cảm ơn bạn rất nhiều.
PKD

Vẫn hữu ích vào năm 2019! Cảm ơn rất nhiều.
ashilon

76

Theo những gì tôi hiểu, bạn không thể chuyển đối số vào một hàm bộ lọc (khi sử dụng bộ lọc 'bộ lọc'). Những gì bạn sẽ phải làm là viết một bộ lọc tùy chỉnh, như sau:

.filter('weDontLike', function(){

return function(items, name){

    var arrayToReturn = [];        
    for (var i=0; i<items.length; i++){
        if (items[i].name != name) {
            arrayToReturn.push(items[i]);
        }
    }

    return arrayToReturn;
};

Đây là jsFiddle đang hoạt động: http://jsfiddle.net/pkozlowski_opensource/myr4a/1/

Một giải pháp thay thế đơn giản khác, không cần viết bộ lọc tùy chỉnh là lưu tên để lọc ra trong một phạm vi và sau đó viết:

$scope.weDontLike = function(item) {
  return item.name != $scope.name;
};

Đó là lời cảm ơn của quận trưởng! Lưu trữ tên trong phạm vi sẽ không hoạt động tốt vì tôi có ba danh sách từ cùng một dữ liệu trên cùng một trang, tôi đang lọc với các trạng thái (hoặc tên) khác nhau.
shapehifter

bất kỳ để đặt 'Adam' (tham chiếu đến JSFiddle của bạn) động? nó dường như không thể (và tôi đoán rằng về mục đích) để kết hợp ngModel và một bộ lọc tùy chỉnh trong góc ...
Rolf

Có thể sắp xếp lại các thông số của bộ lọc không? Ví dụ: chuyển mục vào tham số thứ hai của bộ lọc?
Pooya

Điều đáng chú ý là trong ví dụ này, đánh dấu là {{items | weDontLike: 'thenameyoudontlike'}} ... ngay bây giờ bạn phải bắt tay vào làm mới có được điều đó. Cũng cần lưu ý rằng bạn có thể chuyển nhiều tham số vào bộ lọc tùy chỉnh của mình {{items | weDontLike: 'thename': ['I am', 'an array']: 'and v.v.'}} bạn chỉ cần thêm nhiều đối số hơn vào bộ lọc tùy chỉnh của mình để có quyền truy cập vào chúng.
Benjamin Conant

62

Trên thực tế, bạn có thể chuyển một tham số ( http://docs.angularjs.org/api/ng.filter:filter ) và không cần một hàm tùy chỉnh chỉ cho việc này. Nếu bạn viết lại HTML của mình như bên dưới, nó sẽ hoạt động:

<div ng:app>
 <div ng-controller="HelloCntl">
 <ul>
    <li ng-repeat="friend in friends | filter:{name:'!Adam'}">
        <span>{{friend.name}}</span>
        <span>{{friend.phone}}</span>
    </li>
 </ul>
 </div>
</div>

http://jsfiddle.net/ZfGx4/59/


8
Đúng. Lưu ý bên lề - nếu tên của ai đó là '! Adam', bạn sẽ hiểu anh ta giống như {name: '!! Adam'}.
honzajde

5
Bạn cũng có thể vượt qua các mảng ở đây quá như thế nàyfilter:['Adam', 'john']
iConnor

6
liên kết jsfiddle bị hỏng.
Seregwethrin

4
! Adam là cái tên tồi tệ nhất từ ​​trước đến nay
Ben Wheeler.

6
Not-Not-Adam rõ ràng là tệ hơn.
twip

30

Bạn chỉ có thể làm như thế này trong Mẫu

<span ng-cloak>{{amount |firstFiler:'firstArgument':'secondArgument' }}</span>

Trong bộ lọc

angular.module("app")
.filter("firstFiler",function(){

    console.log("filter loads");
    return function(items, firstArgument,secondArgument){
        console.log("item is ",items); // it is value upon which you have to filter
        console.log("firstArgument is ",firstArgument);
        console.log("secondArgument ",secondArgument);

        return "hello";
    }
    });

Đây là câu trả lời tốt nhất. Nó hoạt động với các đối tượng động. Đây phải là câu trả lời được chấp nhận.
abelabbesnabi


1

Bạn có thể chuyển nhiều đối số vào bộ lọc góc!

Xác định ứng dụng góc cạnh của tôi và một biến cấp ứng dụng -

var app = angular.module('filterApp',[]);
app.value('test_obj', {'TEST' : 'test be check se'});

Bộ lọc của bạn sẽ như sau: -

app.filter('testFilter', [ 'test_obj', function(test_obj) {
    function test_filter_function(key, dynamic_data) {
      if(dynamic_data){
        var temp = test_obj[key]; 
        for(var property in dynamic_data){
            temp = temp.replace(property, dynamic_data[property]);
        }
        return temp;
      }
      else{
        return test_obj[key] || key;
      }

    }
    test_filter_function.$stateful = true;
    return test_filter_function;
  }]);

Và từ HTML, bạn sẽ gửi dữ liệu như: -

<span ng-bind="'TEST' | testFilter: { 'be': val, 'se': value2 }"></span>

Ở đây tôi đang gửi một đối tượng JSON đến bộ lọc. Bạn cũng có thể gửi bất kỳ loại dữ liệu nào như chuỗi hoặc số.

bạn cũng có thể truyền số lượng đối số động để lọc, trong trường hợp đó bạn phải sử dụng đối số để lấy các đối số đó.

Để có bản demo hoạt động, hãy truy cập vào đây - chuyển nhiều đối số vào bộ lọc góc


0

Bạn chỉ cần sử dụng | filter:yourFunction:arg

<div ng-repeat="group in groups | filter:weDontLike:group">...</div>

Và trong js

$scope.weDontLike = function(group) {
//here your condition/criteria
return !!group 
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.