<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Sort and Filter</title>
<!-- CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<style>
body { padding-top:50px;
}
.ta {
overflow: auto;
}
</style>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="js/real5.js"></script>
</head>
<body>
<div class="container" ng-app="sortApp" ng-controller="mainController">
<div class="alert alert-info">
<p>Sort Type: {{ sortType }}</p>
<p>Sort Reverse: {{ sortReverse }}</p>
<p>Search Query: {{ searchFish }}</p>
</div>
<div style="width:600px;height:300px;line-height:3em;overflow:scroll;padding:5px;">
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
Sushi Roll
</td>
<td>
Fish Type
</td>
<td>
Taste Level
</td>
<td>
Taste Height
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red">
</td>
<td>{{ x.postId }}</td>
<td>{{ x.id }}</td>
<td>{{ x.email }}</td>
</tr>
<tr ng-repeat="roll in sushi">
<td>
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red">
</td>
<td>{{ roll.name }}</td>
<td>{{ roll.fish }}</td>
<td>{{ roll.tastiness }}</td>
</tr>
<tr ng-repeat="roll in sushi">
<td>
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red">
</td>
<td>{{ roll.name }}</td>
<td>{{ roll.fish }}</td>
<td>{{ roll.tastiness }}</td>
</tr>
</tbody>
</table>
<div>
</div>
</body>
</html>
<!-- https://scotch.io/tutorials/sort-and-filter-a-table-using-angular-->
angular.module('sortApp', [])
.controller('mainController', function($scope,$http) {
$scope.sortType = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchFish = ''; // set the default search/filter term
// create the list of sushi rolls
$scope.sushi = [
{ name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
{ name: 'Philly', fish: 'Tuna', tastiness: 4 },
{ name: 'Tiger', fish: 'Eel', tastiness: 7 },
{ name: 'Rainbow', fish: 'Variety', tastiness: 6 }
];
$http.get("http://jsonplaceholder.typicode.com/posts/1/comments")
.success(function (response) {$scope.names = response});
});
No comments:
Post a Comment