649

ฉันได้เขียนฟังก์ชันตัวกรองซึ่งจะส่งคืนข้อมูลตามอาร์กิวเมนต์ที่คุณส่งผ่าน ฉันต้องการฟังก์ชั่นเดียวกันในคอนโทรลเลอร์ของฉัน เป็นไปได้ไหมที่จะใช้ฟังก์ชั่นตัวกรองซ้ำในคอนโทรลเลอร์?

นี่คือสิ่งที่ฉันได้ลองมาแล้ว:

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

angularjs angular-filters ng-controller

— Sumanth
แหล่งที่มา

2

คำตอบที่ดีกว่า: stackoverflow.com/questions/20131553/…

— Raza Ahmed

1051

ฉีด$ filterไปยังคอนโทรลเลอร์ของคุณ

function myCtrl($scope, $filter)
{
}

จากนั้นไม่ว่าคุณต้องการใช้ตัวกรองใดก็ตามให้ใช้งานที่นี่:

$filter('filtername');

หากคุณต้องการส่งอาร์กิวเมนต์ไปยังตัวกรองให้ทำโดยใช้วงเล็บแยก:

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

arg1อาร์เรย์ที่คุณต้องการกรองอยู่ที่ไหนและarg2เป็นวัตถุที่ใช้ในการกรอง

— JSAddict
แหล่งที่มา

21

ขอโทษครับผมยังไม่เข้าใจ คุณสามารถสร้าง Jsfiddle เพื่อแสดงวิธีกำหนดเนื้อหาของฟังก์ชั่นตัวกรองและวิธีแทรกเข้าไปในไฟล์ HTML ได้หรือไม่?

— gm2008

34

@ gm2008 คุณสามารถใช้ตัวกรองจำนวนชอบที่จะได้รับvar anyNumber = $filter('number')(12.222222, 2); 12.22

— vinesh

20

+ ฉันตอบคำถาม ... ซึ่งเป็น "วิธีใช้ตัวกรองในคอนโทรลเลอร์?"

— Shanimal

8

ตัวอย่างที่มีตัวกรอง "สกุลเงิน" ในตัวกรอง$filter("currency")(price, "$", 2)ดังนั้นถ้าคุณมีราคา = 200 นิพจน์นั้นจะส่งคืน "$ 200.00"

— Netsi1964

2

คำตอบโดย @ pkozlowski.opensource ดีกว่านี้เพราะมันจะลด "สตริงเวทมนตร์" ประโยชน์อย่างหนึ่ง - จะเป็นอย่างไรถ้าสิ่งนี้อยู่ในตัวควบคุมที่ซับซ้อนมากขึ้นและคุณไม่สามารถทดสอบตัวกรองที่ใช้อยู่ได้ คุณจะไม่สังเกตเห็นข้อผิดพลาดหากคุณใช้$filter('filtter1')(2 t's) อย่างไรก็ตามหากคุณฉีดfiltter1FilterAngular จะบ่นทันทีว่าไม่มีการพึ่งพา

— jkjustjoshing

253

คำตอบที่ให้โดย @Prashanth นั้นถูกต้อง แต่ก็มีวิธีที่ง่ายกว่าในการทำเช่นเดียวกัน โดยทั่วไปแทนที่จะฉีดการ$filterพึ่งพาและการใช้ไวยากรณ์ที่น่าอึดอัดใจของการเรียกมัน ( $filter('filtername')(arg1,arg2);) หนึ่งสามารถฉีดการพึ่งพาเป็น: ชื่อตัวกรองบวกFilterต่อท้าย

ยกตัวอย่างจากคำถามหนึ่งที่สามารถเขียนได้:

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

ควรสังเกตว่าคุณจะต้องผนวกFilterเข้ากับชื่อตัวกรองไม่ว่าคุณจะใช้การตั้งชื่อแบบใด: foo ถูกอ้างอิงโดยการโทรfooFilter
fooFilter ถูกอ้างอิงโดยการโทรfooFilterFilter

— pkozlowski.opensource
แหล่งที่มา

38

แน่นอน .. แต่ฉันยังคงพบกรณีการใช้งานที่คุณต้องการฉีด 10 ตัวกรองไปยังชั้นหนึ่ง ... ชั้นเรียนนี้อาจละเมิดหลักการความรับผิดชอบเดียว ...

— pkozlowski.opensource

10

เพียงเพื่อให้ชัดเจนว่านี่ไม่ใช่ไวยากรณ์ "เจ๋ง" JS ... var fooFilter = $ filter ('foo'); fooFilter (arg1, arg2);

— blindgaenger

13

@OZ_ คุณหมายถึงอะไร มันใช้งานได้ดีหรือไม่ การลดขนาดไม่มีอะไรที่นี่ดูplunk

— pkozlowski.opensource

2

เหมาะสำหรับใช้ตัวกรองเดียวซึ่งเป็นกรณีที่ฉันวิ่งเข้าไป

— Matthew Fotzler

2

+1 ฉันคิดว่าไวยากรณ์ตัวกรอง $ ซ่อนการพึ่งพาจึงนำไปสู่รหัสที่รักษาได้น้อยลง ตัวกรองการฉีด "แบบคงที่" เป็นตัวเลือกที่ดีกว่า

— BiAiB

79

การใช้โค้ดตัวอย่างต่อไปนี้เราสามารถกรองอาร์เรย์ในตัวควบคุมเชิงมุมตามชื่อ นี้จะขึ้นอยู่กับคำอธิบายดังต่อไปนี้ 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
แหล่งที่มา

4

filterFilter (this.array {ชื่อ: 'Igor'}); คือ filterFilter คำค้นหาหรืออะไรกรองข้อมูลโดยอัตโนมัติและทำไม ['filterFilter', ฟังก์ชั่น (filterFilter) {กำหนดที่นี่! ?

— suraj rawat

Plnkr พร้อมตัวอย่างเพิ่มเติมของเทคนิคนี้: plnkr.co/edit/icFurX?p=preview

— OzBob

มีประโยชน์มาก ขอบคุณ

— Kushal Jayswal

48

นี่เป็นอีกตัวอย่างของการใช้งานfilterในคอนโทรลเลอร์แบบ 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.");

ง่าย ๆ เฮ้

— Mike Gledhill
แหล่งที่มา

6

ตรงนี้เป็นสิ่งที่ฉันต้องการขอบคุณ แม้ว่าจะเห็นได้ชัดว่านี่ไม่ใช่คำถามที่เกี่ยวกับ :)

— pvgoran

38

มีสามวิธีที่เป็นไปได้ในการทำเช่นนี้

สมมติว่าคุณมีตัวกรองอย่างง่ายดังต่อไปนี้ซึ่งแปลงสตริงเป็นตัวพิมพ์ใหญ่ด้วยพารามิเตอร์สำหรับอักขระตัวแรกเท่านั้น

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

ผ่านโดยตรง $filter

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

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

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

});

หมายเหตุ: สิ่งนี้จะช่วยให้คุณสามารถเข้าถึงตัวกรองทั้งหมดของคุณ

มอบหมาย$filterให้variable

ตัวเลือกนี้ช่วยให้คุณใช้สิ่งที่$filterคล้ายfunctionกัน

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

    var uppercaseFilter = $filter('uppercase');

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

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

});

โหลดเฉพาะที่เฉพาะเจาะจง Filter

Filterคุณสามารถโหลดเพียงกรองที่เฉพาะเจาะจงโดยท้ายชื่อตัวกรองด้วย

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

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

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

});

สิ่งที่คุณใช้มาเพื่อการตั้งค่าส่วนตัว แต่ฉันขอแนะนำให้ใช้ที่สามเพราะมันเป็นตัวเลือกที่อ่านได้มากที่สุด

— Jeffrey Roosendaal
แหล่งที่มา

15

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

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

ชื่ออาร์กิวเมนต์วิธีที่ 2 ควรเป็น "$ filter" ดังนั้นฟังก์ชั่นการกรองจะทำงานกับตัวอย่างนี้เท่านั้น ในตัวอย่างนี้ฉันได้ใช้ตัวกรอง "ตัวพิมพ์เล็ก"

— Ipog
แหล่งที่มา

12

ฉันมีตัวอย่างอื่นที่ฉันทำเพื่อกระบวนการของฉัน:

ฉันได้อาร์เรย์ที่มีคำอธิบายค่าเช่นนี้

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

ในตัวกรองของฉัน

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

จากนั้นให้ทดสอบ var (คอนโทรลเลอร์):

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

— NtSpeed
แหล่งที่มา

มันจะทำงานใน angularjs 1.0.8 หรือไม่? coz มันไม่ทำงานสำหรับฉัน .. บอกว่า $ filter ไม่ได้ถูกกำหนดแม้หลังจากที่ฉันเพิ่มเข้าไปใน controller แล้ว

— shajin

7

AngularJs ช่วยให้คุณใช้ตัวกรองภายในแม่แบบหรือภายในตัวควบคุม Directive ฯลฯ

ในแม่แบบคุณสามารถใช้ไวยากรณ์นี้

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

และภายในคอนโทรลเลอร์คุณสามารถใช้การฉีดเซอร์วิส$ filter

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

หากคุณต้องการมากขึ้นด้วยตัวอย่างการสาธิตที่นี่คือลิงค์

ตัวอย่างตัวกรองและตัวอย่างของ AngularJs

— Hazarapet Tunanyan
แหล่งที่มา

การรับใช้ไม่ใช่คำ คุณหมายถึงการฉีดหรือไม่

— kevinc

oops.yea ฉันหมายถึงการฉีด

— Hazarapet Tunanyan

6

มีวิธีการประเมินตัวกรองที่สะท้อนไวยากรณ์จากมุมมองอื่น การร้องขอมีขนดก แต่คุณสามารถสร้างทางลัดได้ ฉันชอบที่ไวยากรณ์ของสตริงนั้นเหมือนกับสิ่งที่คุณมีในมุมมอง ดูเหมือนว่านี้:

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

— SimplGy
แหล่งที่มา

มันมีประโยชน์มากจริง ๆ !

— DragonKnight

1

มันยอดเยี่ยมมากเพราะมันทำให้ฉันผ่านสตริงที่ดูเหมือนว่ามันจะอยู่ในมาร์คอัป

— kevinc

5

ดูเหมือนว่าไม่มีใครพูดถึงว่าคุณสามารถใช้ฟังก์ชันเป็นarg2ใน$ filter ('filtername') (arg1, arg2);

ตัวอย่างเช่น:

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

— pavok
แหล่งที่มา

2

ตัวอย่างวันที่เรียบง่ายโดยใช้ตัวกรอง $ ในตัวควบคุมจะเป็น:

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

ตามที่อธิบายไว้ที่นี่ - https://stackoverflow.com/a/20131782/262140

— AVH
แหล่งที่มา

1

ใช้โค้ดด้านล่างหากเราต้องการเพิ่มหลายเงื่อนไขแทนที่จะเป็นค่าเดียวในตัวกรองเชิงมุม javascript:

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

— Amay Kulkarni
แหล่งที่มา

1

ก่อนอื่นให้กรอง $ filter ไปยังคอนโทรลเลอร์ของคุณตรวจสอบให้แน่ใจว่ามีการโหลด ngSanitize ภายในแอปของคุณในภายหลังภายในการใช้งานคอนโทรลเลอร์มีดังนี้:

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

ตรวจสอบเอกสาร angularjs ทุกครั้ง

— serdarsenay
แหล่งที่มา

1

ถ้าคุณต้องการกรองวัตถุในคอนโทรลเลอร์ลองใช้ดู

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

สิ่งนี้จะคืนค่าวัตถุที่ถูกกรองตามเงื่อนไข

— รหัส Spy
แหล่งที่มา

0

การใช้ตัวกรอง An Ang.j.js ซ้ำอีกครั้ง - มุมมอง / ตัวควบคุม

โซลูชันนี้ครอบคลุมการนำตัวกรองเชิงมุมกลับมาใช้ใหม่ ซึ่งเป็นอีกวิธีหนึ่งในการกรองข้อมูลและ Google ลงจอดที่นี่เมื่อฉันต้องการเช่นนั้น และฉันต้องการแบ่งปัน

ใช้ Case

หากคุณกรองอยู่แล้วให้พูดใน ng-repeat ในมุมมองของคุณ (ดังด้านล่าง) ดังนั้นคุณอาจกำหนดตัวกรองในคอนโทรลเลอร์ดังต่อไปนี้ จากนั้นคุณสามารถนำมาใช้ซ้ำได้ในตัวอย่างสุดท้าย

ตัวอย่างการใช้ตัวกรอง - ทำซ้ำที่กรองแล้วในมุมมอง

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

ตัวอย่างคำจำกัดความตัวกรองเชิงมุม

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

ดังนั้นแนวคิดที่นี่คือคุณใช้ตัวกรองที่สร้างขึ้นสำหรับมุมมองของคุณแล้วและตระหนักว่าคุณต้องการใช้มันในคอนโทรลเลอร์ของคุณด้วย

ใช้ฟังก์ชันตัวกรองภายในตัวควบคุมตัวอย่างที่ 1

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

ใช้ฟังก์ชันตัวกรองภายในตัวควบคุมตัวอย่างที่ 2

แสดงปุ่มเฉพาะเมื่อไม่พบรายการซ้ำโดยใช้ตัวกรองก่อนหน้า

ปุ่ม Html

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

ปุ่มแสดง / ซ่อน

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

บางคนอาจพบว่าตัวกรองรุ่นนี้ใช้งานง่ายและเป็นตัวเลือก Angular.js

พารามิเตอร์ตัวเปรียบเทียบเปรียบเทียบ "จริง" ที่ใช้ในมุมมองและในการเรียกใช้ฟังก์ชัน $ filter ระบุว่าคุณต้องการเปรียบเทียบแบบเข้มงวด หากคุณไม่ระบุค่าสามารถค้นหาได้หลายคอลัมน์

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

— เกร็ก
แหล่งที่มา

จะใช้ฟิลเตอร์ในคอนโทรลเลอร์ได้อย่างไร?

มีสามวิธีที่เป็นไปได้ในการทำเช่นนี้