آموزش جستجو و فیلتر کردن اطلاعات با 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 موردپسند شما دوستان قرار گرفته باشد.
دیدگاه ها