649

Saya telah menulis fungsi filter yang akan mengembalikan data berdasarkan argumen yang Anda sampaikan. Saya ingin fungsi yang sama di controller saya. Apakah mungkin untuk menggunakan kembali fungsi filter di controller?

Inilah yang saya coba sejauh ini:

function myCtrl($scope,filter1)
{ 
    // i simply used the filter function name, it is not working.
}

angularjs angular-filters ng-controller

— sumanth
sumber

2

jawaban yang lebih baik: stackoverflow.com/questions/20131553/...

— Raza Ahmed

1051

Suntikkan $ filter ke controller Anda

function myCtrl($scope, $filter)
{
}

Lalu di mana pun Anda ingin menggunakan filter itu, gunakan saja seperti ini:

$filter('filtername');

Jika Anda ingin meneruskan argumen ke filter itu, lakukan dengan menggunakan tanda kurung terpisah:

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

Di mana arg1array yang ingin Anda filter dan arg2adalah objek yang digunakan untuk memfilter.

— JSAddict
sumber

21

Maaf pak, saya masih belum mengerti. Bisakah Anda membuat Jsfiddle untuk menunjukkan cara mendefinisikan fungsi fungsi filter dan bagaimana itu dimasukkan ke dalam file HTML?

— gm2008

34

@ gm2008 Anda bisa menggunakan filter angka var anyNumber = $filter('number')(12.222222, 2);untuk mendapatkan 12.22.

— vinesh

20

+ I untuk menjawab pertanyaan ... yang merupakan "Bagaimana cara menggunakan filter di controller?"

— Shanimal

8

Contoh dengan filter mata uang build "currency": $filter("currency")(price, "$", 2)Jadi, jika Anda memiliki harga = 200, ekspresi itu akan menghasilkan "$ 200.00".

— Netsi1964

2

Jawaban oleh @ pkozlowski.opensource lebih baik daripada ini karena mengurangi "string ajaib". Satu manfaat - bagaimana jika ini berada dalam pengontrol yang jauh lebih kompleks dan Anda gagal menguji unit filter yang digunakan? Anda tidak akan melihat kesalahan jika Anda menggunakan $filter('filtter1')(2 t). Namun, jika Anda menyuntikkan filtter1FilterAngular akan segera mengeluh bahwa ketergantungan tidak ada.

— jkjustjoshing

253

Jawaban yang diberikan oleh @Prashanth benar, tetapi ada cara yang lebih mudah untuk melakukan hal yang sama. Pada dasarnya alih-alih menyuntikkan $filterdependensi dan menggunakan sintaks canggung untuk memintanya ( $filter('filtername')(arg1,arg2);) orang dapat menyuntikkan dependensi: filter name plus the Filtersuffix.

Mengambil contoh dari pertanyaan yang dapat ditulis:

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

Perlu dicatat bahwa Anda harus menambahkan Filternama filter, tidak peduli apa konvensi penamaan yang Anda gunakan: foo direferensikan dengan memanggil fooFilter
fooFilter dirujuk dengan memanggilfooFilterFilter

— pkozlowski.opensource
sumber

38

Tentu .. tapi saya masih menemukan kasus penggunaan di mana Anda ingin menyuntikkan 10 filter ke satu kelas ... Kelas semacam itu mungkin akan melanggar prinsip tanggung jawab tunggal ...

— pkozlowski.opensource

10

Hanya untuk memperjelas, bahwa ini bukan sintaks JS "canggung" ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);

— blindgaenger

13

@ OZ_ apa maksudmu? Itu bekerja minification atau tidak. Minifikasi tidak ada hubungannya di sini, lihat plunk

— pkozlowski.opensource

2

Ini sangat ideal untuk menggunakan filter tunggal, yang merupakan kasus yang saya temui.

— Matthew Fotzler

2

+1 Saya pikir sintaksis $ filter menyembunyikan dependensi, sehingga mengarah ke kode yang kurang dapat dipelihara. Filter injeksi "statis" adalah pilihan yang lebih baik.

— BiAiB

79

Dengan menggunakan kode sampel berikut, kami dapat memfilter array dalam pengontrol sudut dengan nama. ini didasarkan pada uraian berikut. 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
sumber

4

filterFilter (this.array, {name: 'Igor'}); adalah filterFilter kata kunci atau apa yang secara otomatis memfilter data dan mengapa ['filterFilter', berfungsi (filterFilter) {didefinisikan di sini! ?

— suraj rawat

Sebuah Plnkr dengan lebih banyak contoh teknik ini: plnkr.co/edit/icFurX?p=preview

— OzBob

Sangat membantu. Terima kasih.

— Kushal Jayswal

48

Berikut contoh lain penggunaan filterdi pengontrol 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.");

Sederhana ya?

— Mike Gledhill
sumber

6

Inilah yang saya butuhkan, terima kasih. Meskipun tampaknya ini bukan pertanyaannya. :)

— pvgoran

38

Ada tiga cara yang mungkin untuk melakukan ini.

Anggap Anda memiliki filter sederhana berikut, yang mengubah string menjadi huruf besar, dengan parameter untuk karakter pertama saja.

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

Langsung melalui $filter

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

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

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

});

Catatan: ini memberi Anda akses ke semua filter Anda.

Tetapkan $filterke avariable

Opsi ini memungkinkan Anda untuk menggunakan $filtersejenisnya a function.

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

Hanya memuat yang spesifik Filter

Anda hanya dapat memuat filter tertentu dengan menambahkan nama filter dengan Filter.

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

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

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

});

Yang mana yang Anda gunakan datang ke preferensi pribadi, tetapi saya sarankan menggunakan yang ketiga, karena itu pilihan yang paling mudah dibaca.

— Jeffrey Roosendaal
sumber

15

function ngController($scope,$filter){
    $scope.name = "aaaa";
    $scope.age = "32";

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

Metode argumen ke-2 metode controller harus "$ filter" maka hanya fungsionalitas filter yang akan bekerja dengan contoh ini. Dalam contoh ini saya telah menggunakan Filter "huruf kecil".

— Ipog
sumber

12

Saya punya contoh lain, yang saya buat untuk proses saya:

Saya mendapatkan Array dengan nilai-Deskripsi seperti ini

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

di Filters.js saya:

.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';
    };
})

Kemudian, test var (controller):

function myCtrl($scope, $filter) {
    // ....
    var resp = $filter('getState')('1', states);
    // ....
}

— NtSpeed
sumber

Apakah ini akan bekerja di angularjs 1.0.8 ?? karena itu tidak bekerja untuk saya .. mengatakan $ filter tidak didefinisikan bahkan setelah saya menambahkan bahwa di controller

— shajin

7

AngularJs memungkinkan Anda untuk menggunakan filter di dalam template atau di dalam Controller, Directive dll.

dalam template Anda dapat menggunakan sintaks ini

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

dan di dalam controller Anda dapat menggunakan suntikan $ penyaring layanan

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

Jika Anda memerlukan lebih banyak dengan contoh Demo di sini adalah tautan

Contoh filter dan demo AngularJs

— Hazarapet Tunanyan
sumber

inceting bukan kata. Apakah maksud Anda menyuntikkan?

— kevinc

oops.yea maksudku menyuntikkan.

— Hazarapet Tunanyan

6

Ada cara lain untuk mengevaluasi filter yang mencerminkan sintaks dari tampilan. Doa itu berbulu tetapi Anda bisa membuat jalan pintas untuk itu. Saya suka bahwa sintaksis string identik dengan apa yang Anda miliki dalam tampilan. Terlihat seperti ini:

function myCtrl($scope, $interpolate) { 
  $scope.$eval($interpolate( "{{ myvar * 10 | currency }} dollars." ))
}

— SimplGy
sumber

Itu sebenarnya sangat berguna!

— DragonKnight

1

ini fantastis karena memungkinkan saya untuk melewatkan string yang terlihat seperti di markup.

— kevinc

5

Tampaknya tidak ada yang menyebutkan bahwa Anda dapat menggunakan fungsi sebagai arg2 di $ filter ('filtername') (arg1, arg2);

Sebagai contoh:

$scope.filteredItems = $filter('filter')(items, function(item){return item.Price>50;});

— pavok
sumber

2

Contoh tanggal sederhana menggunakan $ filter dalam controller adalah:

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

Seperti yang dijelaskan di sini - https://stackoverflow.com/a/20131782/262140

— AVH
sumber

1

Gunakan kode di bawah ini jika kita ingin menambahkan beberapa kondisi, alih-alih nilai tunggal dalam filter sudut javascript:

var modifiedArray = $filter('filter')(array,function(item){return (item.ColumnName == 'Value1' || item.ColumnName == 'Value2');},true)

— Amay Kulkarni
sumber

1

Pertama-tama masukkan $ filter ke controller Anda, pastikan ngSanitize dimuat dalam aplikasi Anda, kemudian dalam penggunaan controller adalah sebagai berikut:

$filter('linky')(text, target, attributes)

Selalu periksa dokumen angularjs

— serdarsenay
sumber

1

jika Anda ingin memfilter objek di controller coba ini

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

Ini akan mengembalikan objek yang difilter sesuai dengan kondisi if

— Kode Mata-mata
sumber

0

Reusing An Angular.js Filter - View / Controller

Solusi ini mencakup penggunaan kembali Filter Sudut. Yang merupakan cara lain untuk memfilter data, dan Google mendaratkan saya di sini ketika saya membutuhkannya; dan saya suka berbagi.

Gunakan Kasing

Jika Anda sudah memfilter, ucapkan dalam ng-repeat dalam tampilan Anda (seperti di bawah ini), maka Anda mungkin telah menetapkan filter dalam controller sebagai berikut. Dan kemudian Anda dapat menggunakan kembali seperti pada contoh terakhir.

Contoh Penggunaan Filter - Filtered Repeat in View

<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>

Contoh Definisi Filter Sudut

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 };
})

Jadi, konsepnya di sini adalah bahwa Anda sudah menggunakan filter yang dibuat untuk tampilan Anda, dan kemudian menyadari bahwa Anda juga ingin menggunakannya dalam controller Anda.

Penggunaan Fungsi Filter Di Dalam Kontroler Contoh 1

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

Fungsi Filter Gunakan Dalam Contoh Kontroler 2

Tampilkan Tombol hanya jika tidak ada duplikat ditemukan, menggunakan filter sebelumnya.

Tombol Html

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

Tampilkan / Sembunyikan Tombol

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

Beberapa orang mungkin menemukan versi penyaringan ini mudah, dan ini merupakan opsi Angular.js.

Parameter pembanding opsional "benar" yang digunakan dalam tampilan dan dalam panggilan fungsi $ filter menentukan Anda menginginkan perbandingan yang ketat. Jika Anda menghilangkan, nilai dapat dicari lebih dari beberapa kolom.

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

— Greg
sumber