<!-- 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="referencereal/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="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>
<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>
</div>
</body>
</html>
<!-- https://scotch.io/tutorials/sort-and-filter-a-table-using-angular-->
No comments:
Post a Comment