مرتب سازی اطلاعات با استفاده از AngularJS

بسیاری از برنامه نویسان برای نحوه نمایش اطلاعات جدول و همچنین سرعت بازخوانی این اطلاعات با مشکل مواجه می شوند .در این مقاله قصد داریم مرتب سازی اطلاعات را با استفاده از AngularJS که در سمت کاربر اعمال میشود را شرح دهیم.

AngularJS یک خاصیت با نام orderBy دارد که میتواند اطلاعات را مرتب کند .ابتدا در ویژوال استودیو یک پروژه ایجاد میکنیم , سپس Angular.js را دانلودو سپس به پروژه خود اضافه میکنید .پس از دانلود و افزودن آن به پروژه , باید لینک اسکریپت دانلود شده را در قسمت head اضافه کنیم .مانند تگ زیر :

<head runat="server">

    <title></title>

    <script src="angular.min.js"></script>

</head>

پس از افزودن فایل JS , اولین اقدام اضافه کردن تگ ng-app به صفحه میباشد .

<html ng-app xmlns="http://www.w3.org/1999/xhtml">

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

   <script>

        function x($scope) {

            $scope.cars =

                [{ name: 'Alto 800', price: '3.5 Lakh', version: 'Manual' },

                 { name: 'Eon', price: '4.2 Lakh', version: 'Manual' },

                 { name: 'i20', price: '7 Lakh', version: 'Automattic' },

                 { name: 'Honda City', price: '11 Lakh', version: 'Automattic' },

                 { name: 'i10', price: '5 Lakh', version: 'Manual' }]

            $scope.sorting = '-version';

        }

    </script>

در بالا ما لیستی از اطلاعات ایجاد کرده ایم که شامل سه ستون میباشد .هر ستون شامل چند رکورد میباشد .

<body>

 <div ng-app>

  <div ng-controller="x">

    [ <a href="" ng-click="sorting=''">Default</a> ]

    <table class="car">

      <tr>

        <th><a href="" ng-click="sorting = 'name'; reverse=!reverse">Name</a>

        <th><a href="" ng-click="sorting = 'price'; reverse=!reverse">Price</a></th>

        <th><a href="" ng-click="sorting = 'version'; reverse=!reverse">Version</a></th>

      </tr>

      <tr ng-repeat="car in cars | orderBy:sorting:reverse">

        <td>{{car.name}}</td>

        <td>{{car.price}}</td>

        <td>{{car.version}}</td>

      </tr>

    </table>

  </div>

</div>

</body>

"X' نام تابع ای میباشد که در قبل آن را ایجاد کرده ایم .که به یکی از تگ های Div بالاتر از خود متصل شده است .

همانطور که در اجرای نرم افزار مشاهده میکنید ,ابتدا جدول را ایجاد میکند و اگر بر روی هر ستون کلیک کنیم , آن ستون مرتب میشود .که در واقع تابع مرتب سازی برای ستون انتخاب شده اجرا میشود.

آموزش angular

فایل های ضمیمه

WebApplication54.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

مرتب سازی اطلاعات با استفاده از AngularJS

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید