Multiple views in angular.js app

Question

Problem

I am trying to build a product list with (initially) the following features:

Serverside pagination
Serverside filtering

There are a number of problems with what I have at the moment, but the primary thing is that I can't seem to separate the views in the best way. At the moment whenever the page is changed, the category list is updated (and if any items are checked, they are unchecked).

How do I load the category list only on load of the page?

Thanks

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

Could you please provide this as a fiddle? See jsfiddle.net Would make it much easier to help. — Julian Hollmann
– Julian Hollmann, Commented Jan 16, 2013 at 18:39
With echo.jsontest.com you might - just post your request and it will be returned as a response. — Marc
– Marc, Commented Jan 17, 2013 at 21:10

Mark Rajcok · Accepted Answer · 2013-01-17 17:41:36Z

5

If you always want the category list to be visible, put this code into 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 on route changes -- only the part inside ng-view will change.

Update: put the code that loads the categories into a 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>

edited Jan 17, 2013 at 17:41

answered Jan 16, 2013 at 19:04

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fiskah Over a year ago

So where do I place the code that loads the categories and populates the list?

Community · Accepted Answer · 2017-05-23 12:27:42Z

2

Whenever you change views you are swapping the html of the whole page, including the checkboxes.

Break the html code into two views: master and detail (minor change).

Where the Master has the checkboxes and pager and the Detail has the Product list.

This way, angularjs only swaps html code (view) related to the products, not the categories.

This question in the Google forums talks about this issue

Updated: Example moving categories out of 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>
...

Alternatively

Don't use views in this case, group your products and change the data using a repeater (similar to paging, see my other answer with an example here).

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Jan 16, 2013 at 18:41

Ulises

13.4k5 gold badges36 silver badges52 bronze badges

2 Comments

fiskah Over a year ago

Okay. Can you please provide me with an example of how this could be done?

Ulises Over a year ago

Sure, I just added an example

Collectives™ on Stack Overflow

Multiple views in angular.js app

Problem

Code

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Code

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related