سورس سافت | سورس پروژه | دانلود پروژه | سورس کد


م
ن
و
سورس سافت

ادامه مطلب

آموزش جستجو و فیلتر کردن اطلاعات با AngularJS



آموزش جستجو و فیلتر کردن اطلاعات با AngularJS

آموزش جستجو و فیلتر کردن اطلاعات با AngularJS

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

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

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charsert = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
        <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
        <link rel = "stylesheet" type = "text/css" href = "css/style.css">
        <script src = "js/angular.js" ></script>
        <script src = "js/script.js" ></script>
    </head>
<body ng-app = "myModule">
    <nav class = "navbar navbar-default">
        <div class = "container-fluid">
            <a class = "navbar-brand" href = "https://sourcesoft.ir">Sourcesoft</a>
        </div>
    </nav>
    <div class = "row">
        <div class = "col-md-3"></div>
        <div class = "col-md-6 well" ng-controller = "myController">
            <h3 class  = "text-primary">Simple Sort Row Table Header</h3>
            <hr style = "border-top:1px dotted #000;"/>
            <table class = "table table-bordered">
                <thead>
                    <tr>
                        <th ng-click = "sortData('name')">Programming Languages <div ng-class = "getSortClass('name')"></div></th>
                        <th ng-click = "sortData('creator')">Inventor <div ng-class = "getSortClass('creator')"></div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat = "PLang in PLangs | orderBy:sortColumn:reverseSort">
                        <td>{{PLang.name}}</td>
                        <td>{{PLang.creator}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>    
</html>

 

امیدواریم آموزش AngularJS موردپسند شما دوستان قرار گرفته باشد.


لینک کوتاه مطلب :
https://sourcesoft.ir/?p=718

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

علیرضا نجاتی 136 نوشته در سورس سافت دارد . مشاهده تمام نوشته های

دیدگاه ها


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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

logo-samandehi