ล่าสุดการพัฒนาเว็บบทเรียน
 

AngularJSฟิลเตอร์

❮ก่อนหน้า ถัดไปบท❯

ฟิลเตอร์สามารถเพิ่มใน AngularJS การจัดรูปแบบข้อมูล

AngularJS กรอง

AngularJS ให้ฟิลเตอร์ในการแปลงข้อมูล:

  • currency รูปแบบตัวเลขให้เป็นรูปแบบสกุลเงิน
  • date รูปแบบวันที่เป็นรูปแบบที่กำหนด
  • filter เลือกชุดย่อยของรายการจากอาร์เรย์
  • json รูปแบบวัตถุที่จะสตริง JSON
  • limitTo จำกัด อาร์เรย์ / สตริงเป็นจำนวนที่ระบุองค์ประกอบ / ตัวอักษร
  • lowercase รูปแบบสตริงกรณีที่ต่ำกว่า
  • number รูปแบบตัวเลขสตริง
  • orderBy คำสั่งอาร์เรย์โดยการแสดงออก
  • uppercase รูปแบบสตริงกรณีส่วนบน

เพิ่มตัวกรองที่จะแสดงออก

ฟิลเตอร์สามารถเพิ่มลงในการแสดงออกโดยใช้ตัวอักษรท่อ | ตามด้วยตัวกรอง

uppercase สตริงรูปแบบตัวกรองเพื่อกรณีบน:

ตัวอย่าง

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
ลองตัวเอง»

lowercase สตริงรูปแบบตัวกรองเพื่อกรณีที่ต่ำกว่า:

ตัวอย่าง

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
ลองตัวเอง»

เพิ่มตัวกรองระเบียบ

ฟิลเตอร์จะมีการเพิ่มคำสั่งเช่น ng-repeat โดยใช้ตัวอักษรท่อ | ตามด้วยตัวกรอง:

ตัวอย่าง

orderBy กรองเรียงลำดับอาร์เรย์:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
ลองตัวเอง»

กรองสกุลเงิน

currency กรองรูปแบบจำนวนเป็นสกุลเงิน:

ตัวอย่าง

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>
ลองตัวเอง»

อ่านเพิ่มเติมเกี่ยวกับตัวกรองสกุลเงินของเรา อ้างอิงกรองสกุลเงิน AngularJS

กรองกรอง

filter กรองเลือกย่อยของอาร์เรย์

filter กรองเท่านั้นที่สามารถนำมาใช้ในอาร์เรย์และส่งกลับอาร์เรย์ที่มีเฉพาะรายการที่ตรงกัน

ตัวอย่าง

คืนชื่อที่มีตัวอักษร "i":

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>

</div>
ลองตัวเอง»

อ่านข้อมูลเพิ่มเติมเกี่ยวกับการกรองของเราใน การอ้างอิงกรอง AngularJS

กรองอาร์เรย์บนพื้นฐานของข้อมูลผู้ใช้

โดยการตั้งค่า ng-model คำสั่งในช่องใส่เราสามารถใช้ค่าของฟิลด์ป้อนข้อมูลการแสดงออกในตัวกรอง

พิมพ์ตัวอักษรในช่องและรายการที่จะหดตัว / เติบโตขึ้นอยู่กับการแข่งขัน:

  • {{X}}

ตัวอย่าง

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter : test">
    {{ x }}
  </li>
</ul>

</div>
ลองตัวเอง»

เรียงอาร์เรย์บนพื้นฐานของข้อมูลผู้ใช้

คลิกที่ส่วนหัวของตารางเพื่อเปลี่ยนลำดับการจัดเรียง ::

ชื่อ ประเทศ
{{}} x.name {{}} x.country

โดยการเพิ่ม ng-click สั่งที่ส่วนหัวของตารางที่เราสามารถเรียกใช้ฟังก์ชั่นที่มีการเปลี่ยนแปลงเรียงลำดับของอาร์เรย์ A:

ตัวอย่าง

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>
ลองตัวเอง»

กรองแบบกำหนดเอง

คุณสามารถทำให้ตัวกรองของคุณเองโดยการลงทะเบียนฟังก์ชั่นโรงงานกรองใหม่กับโมดูลของคุณ:

ตัวอย่าง

ทำให้กรองที่กำหนดเองที่เรียกว่า "myFormat":

<ul ng-app="myApp" ng-controller="namesCtrl">
    <li ng-repeat="x in names">
        {{x | myFormat }}
    </li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter(' myFormat ', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
ลองตัวเอง»

myFormat กรองจะจัดรูปแบบตัวละครทุกตัวอื่น ๆ ที่จะเป็นตัวพิมพ์ใหญ่


❮ก่อนหน้า ถัดไปบท❯