1

検索結果のページング リンクを表示する Angular ディレクティブがあります。ページリンクの私の現在の実装は、イベントを使用しています...

例えば：

$scope.goToNextPage = function() {
  if ($scope.pageIndex < $scope.maxPage()) {
    $scope.pageIndex = $scope.pageIndex + 1;
  }
};

$location サービスを使用するようにこれを変更して、ページング リンクが実際のリンクとして機能するようにします。つまり、href 属性を持つアンカーとすべての通常の動作です。

したがって、HTML は次のようになります。

<a href="?pageIndex=2">Page 2</a>

私の問題は、ディレクティブが気にせず、影響を与えることができない URL 検索値が既に存在する場合をどのように処理するかです。

たとえば、URL が の場合、/search?customerId=23&pageIndex=1ページ 2 の URL は である必要があります/search?customerId=23&pageIndex=2。しかし、ディレクティブはcustomerIdを知らないか気にしません...

コードでこれを行うと、次のようになります。

$location.search({pageIndex: 2});

しかし、アンカーを使用しているため、HREF に入れる URL を知る必要があります。

不足しているオプションや解決策はありますか?

基本的に、呼び出しの結果として生じる URL を覗く必要があります。$location.search({pageIndex: 2})

4

1 に答える 1

0

おそらく、このための関数を使用する必要があります。何かのようなもの：

$scope.goToPage = function (pageNum) {
    $location.search({pageIndex: pageNum});
}

この方法を使用する場合は、hrefとしてではなくngClickで使用してください。

もう1つのオプションは、urlパラメーターを文字列化することです。これにはjQuery関数が必要です。

<a ng-href="?{{pagingQueryString(2)}}">Page 2</a>

コントローラ機能：

$scope.pagingQueryString = function (pageNum) {
    var queryObject = angular.extend($location.search(), {pageIndex: pageNum});

    // jquery function to stringify the object to url
    return $.param(queryObject);
}

すべてをフィルターでラップすることもできます。

app.filter('pagingQueryString', function ($location) {
    return function (pageNum) {
        var queryObject = angular.extend({}, $location.search(), {pageIndex: pageNum});

        // jquery function to stringify the object to url
        return '?' + $.param(queryObject);
    }
}

HTMLは次のようになります。

<a ng-href="{{2 | pagingQueryString}}">Page 2</a>
于 2013-03-12T12:54:36.763 に答える