کار با فیلترها در انگولار جی اس

فیلترها را می توان در AngularJS برای فرمت داده ها اضافه کرد.

مقالات

filter ها در angular js

AngularJS فیلترها را برای تبدیل داده ها فراهم می کند:

currency یک عدد به یک فرمت ارز تبدیل می کند.
data تاریخ یک فرمت مشخص را قالب بندی کنید.
filter زیر مجموعه ای از آرایه را انتخاب کنید.
json یک شی را به یک رشته JSON قالب بندی کنید.
limitTo محدود کردن یک آرایه / رشته، به تعداد مشخصی از عناصر / کاراکتر.
lowercase رشته ای را برای حروف کوچک فرمت کنید.
number یک عدد را به یک رشته فرمت کنید.
orderBy دستور یک آرایه را با یک expression.
uppercase یک رشته به حروف بزرگ را فرمت کنید.

افزودن filter به expression

فیلترها را می توان با استفاده از علامت لوله | اضافه کرد، سپس با یک فیلتر به آن اضافه می شود.

فرمت فیلتر uppercase رشته ای به حروف بزرگ:

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

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

</div>

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

</div>

رشته های فیلتر کوچک حروف رشته به حروف کوچک:

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

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

</div>

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

</div>

افزودن فیلتر به دستورات – filter to Directives

فیلترها به Directives، مانند 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>

<ul>

</li>

</ul>

</div>

فیلتر ارز – currency

فیلتر ارز یک عدد را به عنوان ارز انتخاب می کند:

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

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

</div>

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

</div>

فیلتر filter

فیلتر filter یک زیر مجموعه از یک آرایه را انتخاب می کند.

فیلتر filter را فقط می توان در آرایه ها استفاده کرد، و آرایه ای را که حاوی تنها موارد مطابق است، بازگرداند.

مثال:

نام هایی را که حاوی حروف “I” برگشت (return) می دهد.

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

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

</div>

<ul>

</li>

</ul>

</div>

یک آرایه بر اساس ورودی کاربر فیلتر کنید.

.
با تنظیم دستورالعمل ng-model در یک فیلد ورودی، می توانیم از مقدار فیلد ورودی به عنوان عبارت در یک فیلتر استفاده کنیم.

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

<ul>

</li>

</ul>

</div>

مرتب سازی آرایه بر اساس ورودی کاربر

در تصویر زیر اگر روی name یا country کلیک شود بر اساس حروف از بالا به پایین مرتب سازی می شوند.

با افزودن دستور ng-click در header های جدول، می توان یک تابع را اجرا کرد که مرتب سازی آرایه را تغییر می دهد:

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

<tr>

<th ng-click="orderByMe('country')">Country</th>

</tr>

<td>{{x.country}}</td>

</tr>

</table>

</div>

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>

</li>

</ul>

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 هر کاراکتر دیگری را به حروف بزرگ تبدیل می کند.

5/5 - (3 امتیاز)

کار با فیلترها در انگولار جی اس – angular js filter

filter ها در angular js

افزودن filter به expression

افزودن فیلتر به دستورات – filter to Directives

فیلتر ارز – currency

فیلتر filter

یک آرایه بر اساس ورودی کاربر فیلتر کنید.

مرتب سازی آرایه بر اساس ورودی کاربر

فیلترهای سفارشی

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

filter ها در angular js

افزودن filter به expression

افزودن فیلتر به دستورات – filter to Directives

فیلتر ارز – currency

فیلتر filter

یک آرایه بر اساس ورودی کاربر فیلتر کنید.

مرتب سازی آرایه بر اساس ورودی کاربر

فیلترهای سفارشی

مطالب زیر را حتما مطالعه کنید

مسیریابی انگولار AngularJS Routing

ساخت انیمیشن با انگولار – angularjs animation

AngularJS Includes

api آنگولار جی اس – Angularjs API

اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation

ساخت form با آنگولار جی اس – angular forms

دیدگاهتان را بنویسید لغو پاسخ