سه شنبه , اردیبهشت ۳ ۱۳۹۸
خانه / Angular / ایجاد فیلتر سفارشی در انگولار
آموزش انگولار

ایجاد فیلتر سفارشی در انگولار

ایجاد فیلتر سفارشی در انگولار

در مقاله فیلترهای انگولار با فیلتر های پیش فرضی که در انگولار یک وجود دارد بصورت خلاصه آشنا شدیم در اینجا سعی داریم ایجاد یک فیلتر سفارشی در انگولار را انجام دهیم.

تعریف فیلتر ساده تبدیل رشته به حروف بزرگ

app.filter('toUppercase', function () {  
   return function (item) {  
      return item.toUpperCase();  
   };  
});

نحوه استفاده در سند html

<span> {{ 'Ehsan Lotfinia' | toUppercase }} </span>

در تعریف مثال بالا مقدار قبل از کاراکتر  ‘ | ‘ را در سند html به عنوان پارامتر به تابع فیلتر ارسال می کنبم حال اگر بخواهیم پارامتر های بیشتر به تابع فیلتر برای عملیات مختلف ارسال کنیم از سینتکس زیر استفاده می کنیم.

<div ng-app="myApp" >
<span>
    {{ 'Ehsan' | toUppercase : 3 }}
</span>
</div>

<script>
var app = angular.module('myApp', []);
  
app.filter('toUppercase', function () {  
   return function (item , limit) {  
      return item.toUpperCase().substr(0, limit);;  
   };  
});

در مثال بالا ما رشته را به عنوان آرگومان اول و یک متغیر به عنوان مشخص کننده تعداد چاپ حروف رشته به عنوان آرگومان دوم ارسال کردیم که نتیجه برابر با EHS خواهد بود.

  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.