ฉันจะเรียกใช้ตัวกรอง Angular.js ด้วยอาร์กิวเมนต์หลายตัวได้อย่างไร


297

จากเอกสารเราสามารถเรียกตัวกรองเช่นวันที่ดังนี้:

{{ myDateInScope | date: 'yyyy-MM-dd' }}

Here date คือตัวกรองที่ใช้อาร์กิวเมนต์หนึ่งตัว

ไวยากรณ์ในการเรียกใช้ตัวกรองที่มีพารามิเตอร์เพิ่มเติมทั้งจากแม่แบบและจากรหัส JavaScript คืออะไร

คำตอบ:


621

ในแม่แบบที่คุณสามารถแยกการขัดแย้งกรองตามทวิภาค

{{ yourExpression | yourFilter: arg1:arg2:... }}

จาก Javascript คุณเรียกมันว่า

$filter('yourFilter')(yourExpression, arg1, arg2, ...)

จริงๆแล้วมีตัวอย่างที่ซ่อนอยู่ในเอกสารตัวกรองorderBy


ตัวอย่าง:

สมมติว่าคุณสร้างตัวกรองที่สามารถแทนที่สิ่งต่างๆด้วยนิพจน์ทั่วไป:

myApp.filter("regexReplace", function() { // register new filter

  return function(input, searchRegex, replaceRegex) { // filter arguments

    return input.replace(RegExp(searchRegex), replaceRegex); // implementation

  };
});

ภาวนาในเทมเพลตเพื่อตรวจสอบตัวเลขทั้งหมด:

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>

4
ในการผูกเทมเพลต HTML {{filter_expression | ตัวกรอง: expression: comparator}}, ใน JavaScript $ filter ('filter') (filter_expression, expression, comparator)
Roman Sklyarov

@pulkitsinghal คุณหมายถึงอะไร? แสดงรหัสที่มีปัญหาของคุณใน JSFiddle หรือ Plunker
Roman Sklyarov

คงจะดีถ้าคุณเพิ่งโพสต์ตัวกรองใน Javascript
Obi

1
@ObiOnuorah ตกลงเพิ่งแปล Coffeescript เป็น Javascript
nh2

1
สิ่งที่ดี. ทำไมคำตอบนี้จึงไม่อยู่ในอันดับต้น ๆ ของรายการ?
thethakuri

11

ฉันพูดถึงในด้านล่างที่ฉันได้กล่าวถึงตัวกรองที่กำหนดเองยังวิธีการเรียกตัวกรองเหล่านี้ซึ่งมีสองพารามิเตอร์

countryApp.filter('reverse', function() {
    return function(input, uppercase) {
        var out = '';
        for (var i = 0; i < input.length; i++) {
            out = input.charAt(i) + out;
        }
        if (uppercase) {
            out = out.toUpperCase();
        }
        return out;
    }
});

และจาก html โดยใช้เทมเพลตเราสามารถเรียกใช้ตัวกรองดังกล่าวได้ด้านล่าง

<h1>{{inputString| reverse:true }}</h1>

ที่นี่หากคุณเห็นพารามิเตอร์แรกคือ inputString และพารามิเตอร์ที่สองเป็นจริงซึ่งรวมกับ "ย้อนกลับ" โดยใช้สัญลักษณ์:


4

หากคุณต้องการเรียกตัวกรองของคุณภายใน ng-options รหัสจะเป็นดังนี้:

ng-options="productSize as ( productSize | sizeWithPrice: product )  for productSize in productSizes track by productSize.id"

โดยที่ตัวกรองคือขนาดด้วยราคาตัวกรองและมีสองพารามิเตอร์ผลิตภัณฑ์และขนาดผลิตภัณฑ์



0

หากคุณต้องการการติดต่ออย่างน้อยสองครั้งกับตัวกรองเป็นไปได้ที่จะโยงพวกเขา:

{{ value | decimalRound: 2 | currencySimbol: 'U$' }} 
// 11.1111 becomes U$ 11.11

เป็นไปได้ที่ซ้ำกัน: stackoverflow.com/questions/16227325/ …
sjokkogutten

1
ไม่ได้ตอบคำถาม "ฉันจะเรียกตัวกรอง Angular.js พร้อมอาร์กิวเมนต์หลายตัวได้อย่างไร" (แทนที่จะ "ฉันจะเรียกตัวกรองหลายตัวได้อย่างไร")
rom99

-1

ในรหัสนี้ jsondata เป็นอาร์เรย์ของเราและในการส่งคืนฟังก์ชั่นเรากำลังตรวจสอบ 'รุ่น' ปัจจุบันใน jsondata

var as = $filter('filter')(jsondata, function (n,jsondata){
   return n.filter.version==='V.0.3'
});

console.log("name is " + as[0].name+as[0]); 
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.