----------------- html --------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Sort and Filter</title>
<style>
body { padding-top:50px; }
</style>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="sortApp" ng-controller="mainController">
Sort by:
<select ng-model="sortDrop">
<option value="fish">By fish</option>
<option value="-date">By Date</option>
<option value="name">By Name</option>
</select>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<th>Name</th>
<th>fish</th>
<th>Date</th>
</tr>
<tr ng-repeat="roll in sushi | orderBy:sortDrop">
<td>{{ roll.name }}</td>
<td>{{ roll.fish }}</td>
<td>{{ roll.date }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
---------------------- Javascript -----------------
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortDrop = 'name';
$scope.sushi = [
{ name: 'Cali Roll', fish: 'Crab', date: new Date(1288323623006) },
{ name: 'Philly', fish: 'Tuna', date: new Date(1450423640000) },
{ name: 'Tiger', fish: 'Eel', date: new Date(12345678000) },
{ name: 'Adi Roll', fish: 'Crab', date: new Date(1450071527000) },
{ name: 'Rainbow', fish: 'Variety', date: new Date(12375678000) }
];
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Sort and Filter</title>
<style>
body { padding-top:50px; }
</style>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-app="sortApp" ng-controller="mainController">
Sort by:
<select ng-model="sortDrop">
<option value="fish">By fish</option>
<option value="-date">By Date</option>
<option value="name">By Name</option>
</select>
<table class="table table-bordered table-striped">
<tbody>
<tr>
<th>Name</th>
<th>fish</th>
<th>Date</th>
</tr>
<tr ng-repeat="roll in sushi | orderBy:sortDrop">
<td>{{ roll.name }}</td>
<td>{{ roll.fish }}</td>
<td>{{ roll.date }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
---------------------- Javascript -----------------
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortDrop = 'name';
$scope.sushi = [
{ name: 'Cali Roll', fish: 'Crab', date: new Date(1288323623006) },
{ name: 'Philly', fish: 'Tuna', date: new Date(1450423640000) },
{ name: 'Tiger', fish: 'Eel', date: new Date(12345678000) },
{ name: 'Adi Roll', fish: 'Crab', date: new Date(1450071527000) },
{ name: 'Rainbow', fish: 'Variety', date: new Date(12375678000) }
];
});
No comments:
Post a Comment