javascript angular.js 应用程序中的多个视图

Multiple views in angular.js app

提问by phidah

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:

索引.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:

应用程序.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:

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:

控制器.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:

服务：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}
        });
    })
;

采纳答案by Mark Rajcok

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

如果您始终希望类别列表可见，请将此代码放入 index.html，在 <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.

然后它不会随着路线变化而改变——只有 ng-view 内的部分会改变。

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

更新：将加载类别的代码放入新控制器中：

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

index.html:

索引.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>

回答by Ulises

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

每当您更改视图时，您都在交换整个页面的 html，包括复选框。

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

将 html 代码分成两个视图：主视图和细节视图（小改动）。

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

Master 有复选框和寻呼机，Detail 有产品列表。

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

这样，angularjs 只交换与产品相关的 html 代码（视图），而不是类别。

This questionin 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).

不要使用意见在这种情况下，组你的产品和改变使用中继器的数据（类似于分页，看到我的其他答案用一个例子在这里）。