Làm thế nào để sử dụng bộ lọc trong bộ điều khiển?

649

Tôi đã viết một hàm lọc sẽ trả về dữ liệu dựa trên đối số bạn đang truyền. Tôi muốn các chức năng tương tự trong bộ điều khiển của tôi. Có thể sử dụng lại chức năng lọc trong bộ điều khiển không?

Đây là những gì tôi đã cố gắng cho đến nay:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}
angularjs  angular-filters  ng-controller 
— sumanth
nguồn
2
câu trả lời tốt hơn: stackoverflow.com/questions/20131553/ từ
— Raza Ahmed

Câu trả lời:

1051

Tiêm bộ lọc $ vào bộ điều khiển của bạn

function myCtrl($scope, $filter)
{
}

Sau đó, bất cứ nơi nào bạn muốn sử dụng bộ lọc đó, chỉ cần sử dụng nó như thế này:

$filter('filtername');

Nếu bạn muốn truyền đối số cho bộ lọc đó, hãy thực hiện bằng cách sử dụng dấu ngoặc đơn riêng biệt:

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

Đâu arg1là mảng bạn muốn lọc và arg2là đối tượng được sử dụng để lọc.

— Mã hóa
nguồn
21
Xin lỗi, thưa ngài, tôi vẫn không hiểu. Bạn có thể tạo một Jsfiddle để hiển thị cách xác định thân hàm bộ lọc và cách nó được chèn vào tệp HTML không?
— gm2008
34
@ gm2008 bạn có thể sử dụng bộ lọc số như var anyNumber = $filter('number')(12.222222, 2);để lấy 12.22.
— vinesh
20
+ Tôi đã trả lời câu hỏi ... đó là "Cách sử dụng bộ lọc trong bộ điều khiển?"
— Tối thiểu
8
Một ví dụ với bộ lọc xây dựng "tiền tệ": $filter("currency")(price, "$", 2)Vì vậy, nếu bạn có giá = 200, biểu thức đó sẽ trả về "$ 200,00".
— Netsi1964 04/03/2015
2
Câu trả lời của @ pkozlowski.opensource tốt hơn thế này vì nó làm giảm "chuỗi ma thuật". Một lợi ích - điều gì xảy ra nếu điều này nằm trong bộ điều khiển phức tạp hơn nhiều và bạn không thể kiểm tra đơn vị bộ lọc đang được sử dụng? Bạn sẽ không nhận thấy lỗi nếu bạn sử dụng $filter('filtter1')(2 t). Tuy nhiên, nếu bạn tiêm filtter1FilterAngular sẽ khiếu nại ngay lập tức rằng sự phụ thuộc không tồn tại.
— jkjustjos Breath
253

Câu trả lời được cung cấp bởi @Prashanth là chính xác, nhưng thậm chí còn có cách dễ dàng hơn để làm điều tương tự. Về cơ bản thay vì tiêm $filterphụ thuộc và sử dụng cú pháp khó xử khi gọi nó ( $filter('filtername')(arg1,arg2);) người ta có thể tiêm phụ thuộc là: tên bộ lọc cộng với Filterhậu tố.

Lấy ví dụ từ câu hỏi người ta có thể viết:

function myCtrl($scope, filter1Filter) { 
  filter1Filter(input, arg1);
}

Cần lưu ý rằng bạn phải thêm Filtervào tên bộ lọc, bất kể bạn đang sử dụng quy ước đặt tên nào: foo được tham chiếu bằng cách gọi fooFilter
fooFilter được tham chiếu bằng cách gọifooFilterFilter

— pkozlowski.opensource
nguồn
38
Chắc chắn .. nhưng tôi vẫn tìm thấy một trường hợp sử dụng mà bạn muốn tiêm 10 bộ lọc cho một lớp ... Một lớp như vậy có thể vi phạm nguyên tắc trách nhiệm duy nhất ...
— pkozlowski.opensource
10
Nói rõ hơn, đây không phải là cú pháp JS "vụng về", var var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);
— Blindgaenger
13
@OZ_ ý bạn là gì? Nó hoạt động tối thiểu hóa hay không. Giảm thiểu không có gì để làm ở đây, xem phần này: plnkr.co/edit/1k6nJnHO8ukBWUfgAyQw?p=preview
— pkozlowski.opensource
2
Điều này là lý tưởng cho việc sử dụng một bộ lọc duy nhất, đó là trường hợp tôi gặp phải.
— Matthew Fotzler
2
+1 Tôi nghĩ rằng cú pháp bộ lọc $ ẩn các phụ thuộc, do đó dẫn đến mã ít bảo trì hơn. Tiêm các bộ lọc "tĩnh" là một lựa chọn tốt hơn.
— BiAiB
79

Sử dụng mã mẫu sau chúng ta có thể lọc mảng trong bộ điều khiển góc theo tên. điều này dựa trên mô tả sau đây. http://docs.angularjs.org/guide/filter

this .filteredArray = filterFilter (this.array, {name: 'Igor'});

JS:

 angular.module('FilterInControllerModule', []).
    controller('FilterController', ['filterFilter', function(filterFilter) {
      this.array = [
        {name: 'Tobias'},
        {name: 'Jeff'},
        {name: 'Brian'},
        {name: 'Igor'},
        {name: 'James'},
        {name: 'Brad'}
      ];
      this.filteredArray = filterFilter(this.array, {name:'Igor'});
    }]);

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example96-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="FilterInControllerModule">
    <div ng-controller="FilterController as ctrl">
    <div>
      All entries:
      <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>
    </div>
    <div>
      Filter By Name in angular controller
      <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>
    </div>
  </div>
</body>
</html>
— aamir sajjad
nguồn
4
bộ lọcFilter (this.array, {name: 'Igor'}); là bộ lọc Lọc một từ khóa hoặc những gì nó tự động lọc ra dữ liệu và tại sao ['filterFilter', function (filterFilter) {được định nghĩa ở đây! ?
— suraj rawat
Một Plnkr với nhiều ví dụ về kỹ thuật này: plnkr.co/edit/icFurX?p=preview
— OzBob
Rất hữu ích. Cảm ơn.
— Kushal Jayswal
48

Đây là một ví dụ khác về việc sử dụng filtertrong bộ điều khiển Angular:

$scope.ListOfPeople = [
    { PersonID: 10, FirstName: "John", LastName: "Smith", Sex: "Male" },
    { PersonID: 11, FirstName: "James", LastName: "Last", Sex: "Male" },
    { PersonID: 12, FirstName: "Mary", LastName: "Heart", Sex: "Female" },
    { PersonID: 13, FirstName: "Sandra", LastName: "Goldsmith", Sex: "Female" },
    { PersonID: 14, FirstName: "Shaun", LastName: "Sheep", Sex: "Male" },
    { PersonID: 15, FirstName: "Nicola", LastName: "Smith", Sex: "Male" }
];

$scope.ListOfWomen = $scope.ListOfPeople.filter(function (person) {
    return (person.Sex == "Female");
});

//  This will display "There are 2 women in our list."
prompt("", "There are " + $scope.ListOfWomen.length + " women in our list.");

Đơn giản nhỉ?

— Mike Gledhill
nguồn
6
Đây chính xác là những gì tôi cần, cảm ơn. Mặc dù rõ ràng đây không phải là câu hỏi. :)
— pvgoran
38

Có ba cách có thể để làm điều này.

Giả sử bạn có bộ lọc đơn giản sau, chuyển đổi một chuỗi thành chữ hoa, với một tham số chỉ cho ký tự đầu tiên.

app.filter('uppercase', function() {
    return function(string, firstCharOnly) {
        return (!firstCharOnly)
            ? string.toUpperCase()
            : string.charAt(0).toUpperCase() + string.slice(1);
    }
});

Trực tiếp thông qua $filter

app.controller('MyController', function($filter) {

    // HELLO
    var text = $filter('uppercase')('hello');

    // Hello
    var text = $filter('uppercase')('hello', true);

});

Lưu ý: điều này cho phép bạn truy cập vào tất cả các bộ lọc của bạn.

Chỉ định $filtermộtvariable

Tùy chọn này cho phép bạn sử dụng $filternhư a function.

app.controller('MyController', function($filter) {

    var uppercaseFilter = $filter('uppercase');

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

Chỉ tải một cụ thể Filter

Bạn chỉ có thể tải một bộ lọc cụ thể bằng cách nối thêm tên bộ lọc với Filter.

app.controller('MyController', function(uppercaseFilter) {

    // HELLO
    var text = uppercaseFilter('hello');

    // Hello
    var text = uppercaseFilter('hello', true);

});

Cái nào bạn sử dụng là sở thích cá nhân, nhưng tôi khuyên bạn nên sử dụng cái thứ ba, vì đó là tùy chọn dễ đọc nhất.

— Jeffrey Roosendaal
nguồn
15 
function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

     $scope.result = function(){
        return $filter('lowercase')($scope.name);
    };
}

Tên đối số thứ hai của phương thức điều khiển phải là "$ filter" thì chỉ có chức năng lọc mới hoạt động với ví dụ này. Trong ví dụ này tôi đã sử dụng Bộ lọc "chữ thường".

— Ipog
nguồn
12

Tôi có một ví dụ khác, mà tôi đã thực hiện cho quá trình của mình:

Tôi nhận được một mảng với giá trị-Mô tả như thế này

states = [{
    status: '1',
    desc: '\u2713'
}, {
    status: '2',
    desc: '\u271B'
}]

trong bộ lọc.js của tôi:

.filter('getState', function () {
    return function (input, states) {
        //console.log(states);
        for (var i = 0; i < states.length; i++) {
            //console.log(states[i]);
            if (states[i].status == input) {
                return states[i].desc;
            }
        }
        return '\u2718';
    };
})

Sau đó, một var (bộ điều khiển) kiểm tra:

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}
— NtSpeed
nguồn
Điều này sẽ làm việc trong angularjs 1.0.8 ?? Vì nó không hoạt động đối với tôi..says bộ lọc $ không được xác định ngay cả sau khi tôi thêm nó vào bộ điều khiển
— shajin
7

AngularJs cho phép bạn sử dụng các bộ lọc bên trong mẫu hoặc bên trong Bộ điều khiển, Chỉ thị, v.v.

trong mẫu bạn có thể sử dụng cú pháp này

{{ variable | MyFilter: ... : ... }}

và bên trong bộ điều khiển, bạn có thể sử dụng dịch vụ lọc $

angular.module('MyModule').controller('MyCtrl',function($scope, $filter){
    $filter('MyFilter')(arg1, arg2);
})

Nếu bạn cần thêm với ví dụ Demo ở đây là một liên kết

Các ví dụ và bản demo của AngularJs

— Hazarapet Tunanyan
nguồn
inceting không phải là một từ. Bạn có nghĩa là tiêm?
— kevinc
oops.yea tôi có nghĩa là tiêm.
— Hazarapet Tunanyan
6

Có một cách khác để đánh giá các bộ lọc phản ánh cú pháp từ các khung nhìn. Yêu cầu có nhiều lông nhưng bạn có thể tạo một lối tắt đến nó. Tôi thích rằng cú pháp của chuỗi giống hệt với những gì bạn có trong một khung nhìn. Trông như thế này:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}
— Đơn giản
nguồn
Điều đó thực sự rất hữu ích!
— DragonKnight
1
Điều này thật tuyệt vời vì nó cho phép tôi vượt qua một chuỗi trông giống như trong đánh dấu.
— kevinc
5

Dường như không ai đề cập rằng bạn có thể sử dụng hàm như arg2 trong bộ lọc $ ('filtername') (arg1, arg2);

Ví dụ: 

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});
— pavok
nguồn
2

Ví dụ ngày đơn giản sử dụng bộ lọc $ trong bộ điều khiển sẽ là:

var myDate = new Date();
$scope.dateAsString = $filter('date')(myDate, "yyyy-MM-dd");

Như đã giải thích ở đây - https://stackoverflow.com/a/20131782/262140

— AVH
nguồn
1

Sử dụng mã bên dưới nếu chúng tôi muốn thêm nhiều điều kiện, thay vì một giá trị trong bộ lọc góc javascript:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)
— Amay Kulkarni
nguồn
1

Nếu bạn muốn lọc đối tượng trong trình điều khiển, hãy thử điều này

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });

Điều này sẽ trả về đối tượng được lọc theo điều kiện if

— Mã gián điệp
nguồn
0

Sử dụng lại Bộ lọc Angular.js - Xem / Trình điều khiển

Giải pháp này bao gồm việc tái sử dụng Bộ lọc góc. Đó là một cách khác để lọc dữ liệu và Google đã đưa tôi đến đây khi tôi cần; và tôi muốn chia sẻ.

Ca sử dụng

Nếu bạn đã lọc, hãy nói lặp lại trong chế độ xem của bạn (như bên dưới), thì bạn có thể đã xác định bộ lọc trong bộ điều khiển như sau. Và sau đó bạn có thể sử dụng lại như trong các ví dụ cuối cùng.

Ví dụ sử dụng bộ lọc - Lặp lại được lọc trong Chế độ xem

<div ng-app="someApp" ng-controller="someController">
    <h2>Duplicates</h2>
    <table class="table table-striped table-light table-bordered-light">
        <thead>
            <tr>
                <th>Name</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="person in data | filter: searchDuplicate:true">
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
            </tr>
        </tbody>
    </table>
</div>

Ví dụ về định nghĩa bộ lọc góc

angular.module('someApp',[])
.controller('someController', function($scope, $filter ) {

    $scope.people = [{name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'male'  , hasDuplicate: true },
                     {name: 'Bob', gender: 'female', hasDuplicate: false}];

    $scope.searchDuplicate = { hasDuplicate : true };
})

Vì vậy, khái niệm ở đây là bạn đã sử dụng bộ lọc được tạo cho chế độ xem của mình và sau đó nhận ra rằng bạn cũng muốn sử dụng nó trong bộ điều khiển của mình.

Chức năng lọc Sử dụng trong bộ điều khiển Ví dụ 1

var dup = $filter('filter')($scope.people, $scope.searchDuplicate, true)

Chức năng lọc Sử dụng trong bộ điều khiển Ví dụ 2

Chỉ hiển thị Nút nếu không tìm thấy trùng lặp, sử dụng bộ lọc trước.

Nút Html

<div ng-if="showButton()"><button class="btn btn-primary" ng-click="doSomething();"></button></div>

Nút Hiển thị / Ẩn

$scope.doSomething = function(){ /* ... */ };
$scope.showButton = function(){ return $filter('filter')($scope.people, $scope.searchDuplicate, true).length == 0; };

Một số có thể tìm thấy phiên bản lọc này dễ dàng và đó là một tùy chọn Angular.js.

Tham số so sánh tùy chọn "true" được sử dụng trong dạng xem và trong lệnh gọi hàm lọc $ chỉ định bạn muốn so sánh chặt chẽ. Nếu bạn bỏ qua, các giá trị có thể được tìm kiếm trên nhiều cột.

https://docs.angularjs.org/api/ng/filter/filter

— Greg
nguồn
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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.