Multiple views in angular.js application

Question

Problem

I am trying to create a list of products with (initially) the following functions:

• Pagination
• Server filtering

There are a number of problems with what I have at the moment, but the main thing is that I cannot distinguish opinions from you in the best way. Currently, whenever a page changes, the list of categories is updated (and if any items are checked, they are not checked).

How to load a list of categories only when the page loads?

thanks

The 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} }); }) ; 

Answer 1

If you always want the category list to be visible, put this code in index.html, above <ng-view>:

 <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 }} 

Then it will not change when changing the route - only the part inside the ng-view will change.

Update : put the code that loads the categories into the new controller:

 function CategoryCtrl($scope, CategoryList) { $scope.categories = CategoryList.query(); $scope.filterCategories = {}; } 

index.html

 <div ng-controller="CategoryCtrl"> <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 }} </div> <div ng-app="relv"> <div ng-view></div> </div> 

Answer 2

Whenever you change views, you change the html of the entire page, including checkboxes.

Break the html-code into two types : master and detail (minor changes).

If the wizard has flags and a pager, and in the "Detail" there is a list of products.

Thus, angularjs replaces only the html (view) code associated with the products, not the categories.

This question on Google forums talks about this issue.

Updated: Example of moving categories from the detail view

 <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 }} <div ng-app="relv"> <div ng-view></div> </div> <a href="#/products/{{ page-1 }}">Previous page</a> <a href="#/products/{{ page+1 }}">Next page</a> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> ... 

As an alternative

Do not use views in this case, group your products and change data using a repeater (similar to a search call, see my other answer with an example here ).