| model | range | |
|---|---|---|
| Toyota Camry | 2010 | 20000 |
| Ford F-150 | 2009 | 30000 |
| Honda Accord | 2011 | 25000 |
| Chevrolet Traverse | 2009 | 20000 |
| Subaru Crosstrek | 2011 | 40000 |
| Volkswagen Tiguan | 2008 | 35000 |
| BMW X3 | 2012 | 30000 |
| Nissan Leaf | 2007 | 18000 |
| Lamborghini | 2013 | 26000 |
| Kia | 2016 | 28000 |
| Maruti | 2017 | 28000 |
| Bentley | 2018 | 30000 |
<style>
.sortorder:after {
content: '\25b2';
// BLACK UP-POINTING TRIANGLE
}
.sortorder.reverse:after {
content: '\25bc';
// BLACK DOWN-POINTING TRIANGLE
}
.input_box{
width:50px;
}
.stripped-Table:nth-child(2n+1){
background-color:aqua;
color:black;
}
.stripped-Table:nth-child(2n){
background-color:gold;
color:black;
}
</style>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table class="table">
<thead>
<tr>
<th>model</th>
<th>
<button ng-click="setOrder('year')">year</button>
<span class="sortorder" ng-show="sortName === 'year'" ng-class="{reverse: reverse}"></span>
</th>
<th>
<button ng-click="setOrder('price')">price</button>
<span class="sortorder" ng-show="sortName === 'price'" ng-class="{reverse: reverse}"></span>
<input type="checkbox" ng-model="priceCheckbox" />
<span>range</span>
</th>
</tr>
<tr>
<th>
<input ng-model="model_filter" />
</th>
<th>
<select ng-model="selectYear" ng-options="y.year for (x,y) in cars | orderBy:'year':true">
<option value="">All</option>
</select>
</th>
<th>
<input class="input_box" ng-model="minPrice" type="number" ng-init="minPrice=25000" />
<input class="input_box" ng-model="maxPrice" type="number" ng-init="maxPrice=35000" />
</th>
</tr>
</thead>
<tbody>
<!--!!selectYear handles ''-->
<tr ng-repeat="x in cars | filter:model_filter | filter:(selectYear||!!selectYear||undefined) | orderBy:orderByProp:reverse"
ng-if="(priceCheckbox && x.price >= minPrice && x.price <= maxPrice)||!priceCheckbox" class="stripped-Table">
<td>{{x.model}}</td>
<td>{{x.year}}</td>
<td>{{x.price}}</td>
</tr>
</tbody>
</table>
</div>
<script>
angular.module('myApp', []).controller('myCtrl', function ($scope) {
$scope.cars = [
{ model: "Toyota Camry", year: 2010, price: 20000 },
{ model: "Ford F-150", year: 2009, price: 30000 },
{ model: "Honda Accord", year: 2011, price: 25000 },
{ model: "Chevrolet Traverse", year: 2009, price: 20000 },
{ model: "Subaru Crosstrek", year: 2011, price: 40000 },
{ model: "Volkswagen Tiguan", year: 2008, price: 35000 },
{ model: "BMW X3", year: 2012, price: 30000 },
{ model: "Nissan Leaf", year: 2007, price: 18000 },
{ model: "Lamborghini", year: 2013, price: 26000 },
{ model: "Kia", year: 2016, price: 28000 },
{ model: "Maruti", year: 2017, price: 28000 },
{ model: "Bentley", year: 2018, price: 30000 },
];
$scope.setOrder = function (x) {
$scope.orderByProp = x;
$scope.reverse = !$scope.reverse;
$scope.sortName = x;
}
});
angular.bootstrap(document.getElementById("myApp"), ['myApp']);
</script>
</body>
reference:
https://www.w3schools.com/angular/angular_filters.asp
https://docs.angularjs.org/api/ng/filter/orderBy
https://stackoverflow.com/questions/28164580/ng-repeat-filter-show-all-items-if-no-filter-selected
https://stackoverflow.com/questions/24081004/angularjs-ng-repeat-filter-when-value-is-greater-than
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_form_radio
https://www.w3schools.com/angular/angular_services.asp
https://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page
This comment has been removed by the author.
ReplyDelete