6

HTML ページで 2 回使用しているテンプレート ファイルを使用してページャー ウィジェットを作成しました。ページに移動するオプションを選択し、前のページと次のページへのリンクもあります。

問題は、選択ボックスを使用して現在のページを更新し、次に前と次のページのリンクを使用すると、現在のページは更新されますが、選択ボックスは更新されません。

私が間違っていることを教えてください。このようなページャー ウィジェットを構築するための私のアプローチに論理的な間違いはありますか?

コントローラーコード:

 var gallery = angular.module('gallery', []);
    gallery.controller('ItemListCtrl', ['$scope', function($scope){
      /*  Pagination Code */
    $scope.currentPage = 1;
    $scope.itemsPerPage = 24;
    $scope.total = 100;
    $scope.range = function(min, max, step){
      step = step || 1;
      var input = [];
      for (var i = min; i <= max; i += step) input.push(i);
      return input;
    };
    $scope.prevPage = function (){
      if($scope.currentPage > 1){
        $scope.currentPage--;
      }
    };
    $scope.nextPage = function (){
      if($scope.currentPage < $scope.pageCount()){
        $scope.currentPage++;
      }
    };
    $scope.pageCount = function (){
      return Math.ceil($scope.total / $scope.itemsPerPage);
    };
    $scope.setPage = function (n){
      if(n >= 0 && n <= $scope.pageCount()){
        $scope.currentPage = parseInt(n, 10);
      }
    };
  }]);

問題を再現するための plnkr の URL は次のとおりです。

http://plnkr.co/edit/9LUJnVzWAS9BauyORQn5?p=preview

4

1 に答える 1

12

根本的な原因はng-include、対象となる要素に対して別のスコープを作成することです。そのため、コードをすばやく修正するには、$parentすべてのスコープ オブジェクトにプレフィックスを追加します。

<fieldset class="pager">
<div>Page {{$parent.currentPage}} of {{$parent.pageCount()}}</div>
<div>
<div>
<label>Go to page</label>
<select ng-model='$parent.currentPage' ng-change="$parent.setPage($parent.currentPage)">
<option ng-repeat="n in range(1,$parent.pageCount())" value="{{n}}" ng-selected="n === $parent.currentPage">{{n}}</option>
</select>
</div>
<div>
<a href ng-click="$parent.prevPage()">Previous Page</a>
&nbsp;|&nbsp; 
<a href ng-click="$parent.nextPage()">Next Page</a>
</div>
</div>
</fieldset>

Angular ドキュメントUnderstanding Scopesによると、プリミティブへの双方向データ バインディング (つまり、フォーム要素、ng-model) を試みると、Scope 継承は期待どおりに機能しません。プリミティブに関するこの問題は、常に「.」を使用するという「ベスト プラクティス」に従うことで簡単に回避できます。あなたのngモデルで

于 2015-02-15T12:08:33.353 に答える