Issue
I'm currently working on creating a product list with the following initial features:
- Server-side pagination
- Server-side filtering
I am facing several challenges with my current setup, but the main issue is that I can't figure out how to separate the views effectively. Currently, whenever the page is changed, the category list gets updated (and any checked items get unchecked).
Is there a way for me to load the category list only when the page initially loads?
Thank you
Code
index.html:
<div ng-app="relv">
<div ng-view></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angularjs/1.0.2/angular-resource.min.js"></script>
<script src="/angular/app.js"></script>
<script src="/angular/services.js"></script>
<script src="/angular/controllers.js"></script>
<script src="/angular/filters.js"></script>
<script src="/angular/directives.js"></script>
app.js:
'use strict';
angular.module('relv', ['relv.filters', 'relv.services', 'relv.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/products', {templateUrl: '/angular/partials/product_list.html', controller: ProductListCtrl});
$routeProvider.when('/products/:page', {templateUrl: '/angular/partials/product_list.html', controller: ProductListCtrl});
$routeProvider.otherwise({redirectTo: '/products'});
}]);
product_list.html:
<div id="category_list">
<label ng-repeat="category in categories">
<input type="checkbox" name="category" ng-model="filterCategories[category.id]"> {{ category.name }}
</label>
</div>
{{ filterCategories }}
Product list, page {{ page }}.
<br><br>
<ul>
<li ng-repeat="product in products">
<a href="#/product/{{ product.id }}">{{ product.name }}</a><br>
<span ng-repeat="category in product.categories">{{ category.name }}</span>
</li>
</ul>
<a href="#/products/{{ page-1 }}">Previous page</a>
<a href="#/products/{{ page+1 }}">Next page</a>
controllers.js:
'use strict';
function ProductListCtrl($routeParams, $scope, ProductList, CategoryList) {
$scope.page = $routeParams.page ? parseInt($routeParams.page) : 1;
$scope.products = ProductList.query({'page': $scope.page});
$scope.categories = CategoryList.query();
$scope.filterCategories = {};
}
ProductListCtrl.$inject = ['$routeParams', '$scope', 'ProductList', 'CategoryList'];
services:js:
'use strict';
angular.module('relv.services', ['ngResource']).
factory('Product', function($resource){
return $resource('http://endpoint/api_dev.php/products/:productId.json', {}, {
query: {method:'GET', params:{lang:'en'}, isArray:false}
});
}).
factory('ProductList', function($resource){
return $resource('http://endpoint/api_dev.php/products.json', {}, {
query: {method:'GET', params:{lang:'en', page: ':page'}, isArray:true}
});
}).
factory('CategoryList', function($resource){
return $resource('http://endpoint/api_dev.php/categories.json', {}, {
query: {method:'GET', params:{lang:'en'}, isArray:true}
});
})
;