|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

فیلتر ها در AngularJS

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

فیلتر های AngularJS

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

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

اضافه کردن فیلتر ها به عبارت های AngularJS

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

فیلتر  uppercase   رشته ها رو با فرمت حروف بزرگ نمایش می دهد.

مثال فیلتر ها در AngularJS
<div ng-app="myApp" ng-controller="personCtrl">

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

</div> 
مشاهده مثال

فیلتر  lowercase   رشته ها رو با فرمت حروف کوچک نمایش می دهد.

مثال فیلتر ها در AngularJS
<div ng-app="myApp" ng-controller="personCtrl">

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

</div> 
مشاهده مثال

اضافه کردن فیلتر به دستورات یا directive ها در AngularJS

فیلتر ها با استفاده از کاراکتر  |   به دایرکتیو هایی مثل ng-repeat  نیز اضافه می گردند.

فیلتر orderBy عناصر آرایه را مرتب می کند.

مثال فیلتر ها در AngularJS
<div ng-app="myApp" ng-controller="namesCtrl">

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

</div> 
مشاهده مثال

فیلتر واحد پول در AngularJS

currency اعداد را بصورت واحد پول فیلتر می کند.

مثال فیلتر ها در AngularJS
<div ng-app="myApp" ng-controller="costCtrl">

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

</div> 
مشاهده مثال

فیلتر filter در AngularJS

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

فیلتر filter فقط در آرایه ها مورد استفاده قرار می گیرد ، و عناصر متناظر با قیلتر را بی می گرداند.

مثال فیلتر ها در AngularJS
<div ng-app="myApp" ng-controller="namesCtrl">

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

</div> 
مشاهده مثال

فیلتر عناصر آرایه بر اساس ورودی input کاربر

با مقدار دهی ng-model  بر روی یک textbox َمی توان فیلتر را روی ورودی کاربر انجام داد.

  • x.name

مثال فیلتر ها در AngularJS
 <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>
مشاهده مثال

با اضافه کردن دستور ng-click در هدر جدول ما میتوانیم مرتب سازی آرایه ها را تغییر بدهیم.

مثال فیلتر ها در AngularJS
 <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> 
مشاهده مثال

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

شما می توانید فیلتر های مخصوص خود را با نوشتن متد های جدید در ماژول خود ثبت کنید.

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

 

نظر شما

>

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد