ably ably برای هدایت شدن به سایت جدید اینجا کلیک کنید

آموزش برنامه نویسی

آموزش برنامه نویسی وب، اندروید، ویندوز , اسکیوال و...
Tell: 0912 097 5516
| Email: Hello@EduOnline.ir

دوره آموزشی AngularJS به زبان فارسی - بخش پنجم

بسم الله الرحمن الرحیم

 

این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و  Angular.js " مراجعه کنید.

 

مشاهده تمامی آموزش های دوره AngularJS

دوره آموزش AngularJS

بخش پنجم

AngularJS Filters

Filter ها می توانند به رهنمود ها و عبارت ها با استفاده از یک کاراکتر pipe ( | ) اضافه شوند.
فیلترهای AngularJS می توانند شکل داده ها را تغییر دهند:

Filter Description
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.

 اضافه کردن Filter ها به Expression ها

در دو مثال بعدی ما از personController که در مقاله قبل از آن استفاده کردیم بهره می بریم.
فیلتر uppercase همانطور که از نام آن مشخص است فرمت رشته ها (string) به حروف بزرگ تغییر می دهد.

 <div ng-app="" ng-controller="personController">

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

</div>

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

 <div ng-app="" ng-controller="personController">

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

</div>

The currency Filter

این فیلتر برای نمایش اعداد در واحدهای پول می باشد.

 <div ng-app="" ng-controller="costController">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>Total = {{ (quantity * price) | currency }}</p>

</div>

اضافه کردن Filter ها به رهنمودها

فیلتر orderBy یک آرایه را براساس یک عبارت (شرط و نحوه مرتب سازی) مرتب می کند.

 <div ng-app="" ng-controller="namesController">

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

<div>

Filtering Input

یک فیلتر input می تواند به یک رهنمود به وسیله کاراکتر pipe ( | ) اضافه شود و همچنین با یک کولن ( , ) و یک مدل دنبال شود.

 <div ng-app="" ng-controller="namesController">

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

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

</div>

مشاهده تمامی آموزش های دوره AngularJS

نظرات (۰)

هيچ نظري هنوز ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی
up
ما را در گوگل محبوب کنید