بخش های اصلی

آموزش AngularJS

آموزش AngularJS – فیلترها

فیلترها برای تغییر داده ها به کار میرن و با استفاده از کاراکتر پایپ (pipe)، در عبارات یا دستورات هم به کار میرن. در ادامه لیستی از پرکاربردترین فیلترها را مشاهده می کنین.

شماره

نام

توضیحات

1

Uppercase

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

2

Lowercase

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

3

Currency

متن را به فرمتِ currency (پول)  درمیاره.

4

Filter

بر اساس معیارهای ارائه شده، آرایه را به زیرآرایه هایی فیلتر می کنه.

5

Orderby

بر اساس معیارهای ارائه شده، سفارشِ آرایه میده.

فیلترِ uppercase

با استفاده از کاراکترِ پایپ، یک فیلترِ uppercase، به یک عبارت اضافه کنین. در ادامه از فیلتر uppercase برای چاپ نام دانش آموزان با حروف بزرگ استفاده می کنیم.

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

فیلترِ lowercase

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

Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Lower Case: {{student.fullName() | lowercase}}

فیلترِ currency

با استفاده از کاراکترِ پایپ، یک فیلترِ currency ، به یک عبارت اضافه کنین. در ادامه از فیلتر currency برای چاپ هزینه ها در فرمتِ currency (پول)، استفاده می کنیم.

Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

فیلترِ filter

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

Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
  <li ng-repeat = "subject in student.subjects | filter: subjectName">
     {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>

فیلترِ orderby

برای مرتب کردن موضوعات بر اساس نمره ها از orderBy marks استفاده کرده ایم.

Subject:
<ul>
  <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
     {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>

مثال

مثال زیر تمام فیلترهای بالا را نشان میده.

testAngularJS.htm

<html>
   
   <head>
      <title>Angular JS Filters</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         <table border = "0">
            <tr>
               <td>Enter first name:</td>
               <td><input type = "text" ng-model = "student.firstName"></td>
            </tr>
            
            <tr>
               <td>Enter last name: </td>
               <td><input type = "text" ng-model = "student.lastName"></td>
            </tr>
            
            <tr>
               <td>Enter fees: </td>
               <td><input type = "text" ng-model = "student.fees"></td>
            </tr>
            
            <tr>
               <td>Enter subject: </td>
               <td><input type = "text" ng-model = "subjectName"></td>
            </tr>
         </table>
         <br/>
         
         <table border = "0">
            <tr>
               <td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td>
            </tr>
         
            <tr>
               <td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td>
            </tr>
         
            <tr>
               <td>fees: </td><td>{{student.fees | currency}}
               </td>
            </tr>
				
            <tr>
               <td>Subject:</td>

               <td>
                  <ul>
                     <li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'">
                        {{ subject.name + ', marks:' + subject.marks }}
                     </li>
                  </ul>
               </td>
            </tr>
         </table>
         
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Hamid",
               lastName: "Tadayoni",
               fees:500,
               
               subjects:[
                  {name:'Physics',marks:70},
                  {name:'Chemistry',marks:80},
                  {name:'Math',marks:65}
               ],
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

خروجی

testAngularJS.htm را در مرورگر باز کنین. خروجی را ببینین.

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش AngularJS

Learn AngularJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد