7

問題

(最初は) 次の機能を備えた製品リストを作成しようとしています。

  • サーバーサイドのページネーション
  • サーバー側のフィルタリング

現時点で私が持っているものには多くの問題がありますが、主なことは、ビューを最良の方法で分離できないように見えることです. ページが変更されるたびに、その瞬間にカテゴリ リストが更新されます (チェックされている項目がある場合は、チェックが解除されます)。

ページの読み込み時にのみカテゴリ リストを読み込むにはどうすればよいですか?

ありがとう

コード

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'];

サービス: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}
        });
    })
;
4

2 に答える 2

5

カテゴリ リストを常に表示したい場合は、次のコードを 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 }}

その後、ルートが変更されても変更されません。ng-view 内の部分のみが変更されます。

更新: カテゴリをロードするコードを新しいコントローラーに入れます。

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>
于 2013-01-16T19:04:10.493 に答える
2

ビューを変更するたびに、チェックボックスを含むページ全体の html を交換しています。

HTML コードをマスターと詳細の 2 つのビューに分割します (マイナー チェンジ)。

マスターにはチェックボックスとページャーがあり、詳細には製品リストがあります。

このように、angularjs は、カテゴリではなく、製品に関連する html コード (ビュー) のみを交換します。

Google フォーラムのこの質問では、この問題について話しています

更新: 詳細ビューからカテゴリを移動する例

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

あるいは

この場合はビューを使用せず、製品をグループ化し、リピーターを使用してデータを変更します (ページングと同様に、こちらの例で他の回答を参照してください)。

于 2013-01-16T18:41:17.917 に答える