آموزش انگولار-فیلترها
فیلترها می توانند با استفاده از یک کاراکتر خط عمودی به عبارات و دستورات اضافه شوند.
فیلترهای انگولار
از فیلترهای انگولار می توان برای تبدیل داده ها استفاده نمود:
فیلتر | توضیحات |
---|---|
currency |
فرمت کردن عدد به پول رایج. |
filter |
گرفتن یک زیرمجموعه از آیتم های یک آرایه. |
lowercase |
فرمت کردن یک رشته به صورت حروف کوچک. |
orderBy |
یک آرایه را به وسیله ی یک عبارت، مرتب می کند. |
uppercase |
فرمت کردن یک رشته به صورت حروف بزرگ. |
اضافه کردن فیلترها به عبارات
یک فیلتر می تواند با استفاده ا یک کاراکتر خط عمودی(|) به یک عبارت اضافه شود.
برای دو مثال بعدی ما از کنترلر person از مقاله ی قبلی، استفاده می کنیم.
فیلتر uppercase، رشته ها را به صورت حروف بزرگ درمی آورد:
مثالی از انگولار
<p>The name is {{ lastName | uppercase }}</p>
</div>
فیلتر lowercase رشته ها را به صورت حروف کوچک درمی آورد:
مثالی از انگولار
<p>The name is {{ lastName | lowercase }}</p>
</div>
فیلتر currency
فیلتر currency یک عدد را به صورت ارز(پول رایج) فرمت بندی می کند:
مثالی از انگولار
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
اضافه کردن فیلترها به دستورات
یک فیلتر می تواند با استفاده از یک کاراکتر خط عمودی(|) به یک دستور اضافه شود.
فیلتر orderBy یک آرایه را به وسیله ی یک عبارت، مرتب می کند:
مثالی از انگولار
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
فیلتر کردن ورودی
یک فیلتر که برای ورودی ها در نظر گرفته شده است، می تواند به وسیله ی یک کاراکتر خط عمودی(|) به یک دستور اضافه شود و سپس فیلتر مورد نظر با یک علامت دو نقطه(:) و سپس نام مدل دنبال شود.
The filter filter selects a subset of an array:
مثالی از انگولار
<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>
- نوشته شده توسط احسان عباسی
- بازدید: 9390