Example 3: Products Show Room With Searching and Sorting
For this example, we will show you how to list the records in table format with header sorting and keyword auto-complete searching functions. Please follow below steps:
- Update C:\workspace_ionic\itBlogsApp\www\js\app.js , add below code after .state(‘app.shop’
.state(‘app.productlists’, { url: ‘/productlists’, views: { ‘menuContent’: { templateUrl: ‘templates/productlists.html’, controller: ‘ProductListsController’ } } })
.state(‘app.product’, { url: ‘/productlists/:productId’, views: { ‘menuContent’: { templateUrl: ‘templates/product.html’, controller: ‘ProductController’ } } })
- Update C:\workspace_ionic\itBlogsApp\www\templates\menu.html, add the this code
<ion-item menu-close href=”#/app/productlists”>Products Show Room</ion-item>
after
<ion-item menu-close href=”#/app/shoplists”>Find Nearby Shops</ion-item>
- Update C:\workspace_ionic\itBlogsApp\www\js\controllers.js , adding below code after .controller(‘ShopController’, function($scope, $http, $stateParams)
.controller(‘ProductListsController’, function($scope, $http, $stateParams) {
$scope.getData = function() {
$http.get(“http://localhost:8080/SpringRestfulExample/product”)
.success(function(data, status) {
$scope.productlists = data;
})
.error(function(data, status) {
console.log(‘ProductListsController getData Error…’, status);
});
};
$scope.search = function() {
var key = angular.element(query).scope().query;
var length = key.length;
//Action when query length >= 3
if(length >= 3) {
$http.get(“http://localhost:8080/SpringRestfulExample/product/q/”+key)
.success(function(data, status) {
$scope.productlists = data;
})
.error(function(data, status) {
console.log(‘ProductListsController search Error…’, status);
});
} else {
$scope.getData();
}
};
$scope.getData();
})
.controller(‘ProductController’, function($scope, $http, $stateParams) {
$scope.getData = function() {
$http.get(“http://localhost:8080/SpringRestfulExample/product/”+$stateParams.productId)
.success(function(data, status) {
$scope.product = data;
})
.error(function(data, status) {
console.log(‘ProductController Error…’, status);
});
};
$scope.getData();
})
- Finally, adding productlists.html and product.html to C:\workspace_ionic\itBlogsApp\www\templates\ . Please find below codes:
productlists.html
<ion-view view-title=”Products Show Room”>
<ion-content>
<div class=”card”>
<div class=”item item-divider”>
Keyword Searching… {{query}}
</div>
<div class=”item item-text-wrap”>
<label class=”item item-input”>
<i class=”icon ion-search placeholder-icon”></i>
<input type=”search” placeholder=”Search” id=”query” ng-model=”query” ng-change=”search()”>
</label>
</div>
<div class=”item item-divider”>
<div class=”row” style=”border-bottom: 1px solid black; background-color:mintcream;”>
<div class=”col-50″>
<a href=”#” ng-click=”orderByField=’name’; reverseSort = !reverseSort”>
Name <span ng-show=”orderByField == ‘name'”><span ng-show=”!reverseSort”><img src=”/img/arrow-up-b.png” width=”10px”></span><span ng-show=”reverseSort”><img src=”/img/arrow-down-b.png” width=”10px”></span></span>
</a>
</div>
<div class=”col-20″>
<a href=”#” ng-click=”orderByField=’price’; reverseSort = !reverseSort”>
Price <span ng-show=”orderByField == ‘price'”><span ng-show=”!reverseSort”><img src=”/img/arrow-up-b.png” width=”10px”></span><span ng-show=”reverseSort”><img src=”/img/arrow-down-b.png” width=”10px”></span></span>
</a>
</div>
<div class=”col-20 col-offset-20″>
<a href=”#” ng-click=”orderByField=’status’; reverseSort = !reverseSort”>
Status <span ng-show=”orderByField == ‘status'”><span ng-show=”!reverseSort”><img src=”/img/arrow-up-b.png” width=”10px”></span><span ng-show=”reverseSort”><img src=”/img/arrow-down-b.png” width=”10px”></span></span>
</a>
</div>
</div>
<div style=”margin-top: 5px”>
<div class=”row” ng-repeat=”product in productlists | orderBy:orderByField:reverseSort”>
<div class=”col-50″><a href=”#/app/productlists/{{product.id}}”>{{product.name}}</a></div>
<div class=”col-20″>{{product.price}}</div>
<div class=”col-20 col-offset-20″>{{product.status}}</div>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
product.html
<ion-view view-title=”Product Details”>
<ion-content>
<div class=”card”>
<div class=”item item-divider”>
<h2 class=”title”>{{product.name}}</h2>
</div>
<div class=”item item-text-wrap”>
<div class=”row”>
<div class=”col-25″>Details</div>
<div class=”col-100 col-offset-100″><p>{{product.details}}</p></div>
</div>
<div class=”row”>
<div class=”col-25″>Price</div>
<div class=”col-100 col-offset-100″><p>{{product.price}}</p></div>
</div>
<div class=”row”>
<div class=”col-25″>Status</div>
<div class=”col-100 col-offset-100″><p>{{product.status}}</p></div>
</div>
</div>
</div>
</ion-content>
</ion-view>
Done, let’s try to refresh the browser, you should find that the menu has been updated as:
Click on “Products Show Room”, it will show you the list of products:
Let’s try the functions on this page:
- Sorting
You can click on the columns’ header, for example, 
, it will do descending sort:
Let’s click again, it will do ascending sort:
- Auto-complete searching
On the upper part of the page, you can find:
Let’s enter “mini” into the searching text box:
It will make a $http.get() request to the restful server with keyword “mini”, and the server returns with filtering records. You can refresh the product lists by removing the searching text.
- Check product details
Let’s click on any one of the product from the list, it will redirect you to Product Details page:
About Author
