2

URLに応じてフィルタリングする必要があるテーブルがあります。

これは私のモジュールです::

angular.module('myApp', ['pipelibservice']).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/pipes/:pipeID', {templateUrl: 'partials/wizard.html',   controller: PipeListCtrl});
    }]);

私のテンプレートには、テーブルをフィルタリングする必要がある href を含むリストがあります。

    <li ng-repeat="pipe in pipes">
        <a href='#/pipes/{{ pipe.code }}'>{{ pipe.code }} - {{pipe.title_en}}</a>
    </li>

これは私のindex.htmlです

<!doctype html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>

  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/0.7.2/angular-strap.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="lib/angular/angular-resource.js"></script>
</head>
<body>
    <div ng-view></div>


</body>
</html>

問題は、リンクをクリックするとページ全体がリロードされることです。テーブルがフィルタリングされるように、URL のみを変更したい。ページがリロードされないように修正するにはどうすればよいですか?

更新: 残りの API 呼び出しに絞り込みました。残りの呼び出しを（元の残りの呼び出しから）ハードコードされた値に置き換えると、機能します。何が間違っている可能性がありますか？

4

3 に答える 3

2

通常、$route を使用してページを更新することはできません。しかし、あなたの場合、フィルターhttp://docs.angularjs.org/api/ng.filter:filterを使用するだけです

<li ng-repeat="pipe in pipes | filter: pipeID">
    <a href='#/pipes/{{ pipe.code }}'>{{ pipe.code }} - {{pipe.title_en}}</a>
</li>

ctrl $scope.pipeID = $routeParams.pipeID を入力することを忘れないでください

PS私は、少し単純なBen Nadelsのアイデア（素晴らしい）と、http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-basic_20を更新せずに$routeを使用する方法を説明する投稿を書きました.html

ポイントは、 $route を templateUrl および/またはコントローラーで使用すると、コントローラーとビューの新しいインスタンスが作成されることです。説明によると、それは必要ありません。したがって、templateUrlコントローラーをドロップしてカスタムパラメーターを送信し、アプリでngSwitchを使用してngIncludeを切り替え、1つのコントローラーですべてを管理できます

于 2013-08-28T11:22:05.257 に答える
1

ngHref のドキュメントに従ってng-click、ページのリロードを防ぐために使用する必要があります。

<a href='' ng-click="goToPipe({{pipe.code}})">{{ pipe.code }} - {{pipe.title_en}}</a>

goToPipe次のような関数をコントローラーに作成する必要があります。

$scope.goToPipe = function (pipe_code) {
    $location.path("/pipe/" + pipe_code);
};
于 2013-06-02T15:03:05.960 に答える
1

これまでのところ、この問題に対して私が見つけた唯一の解決策は次のとおりです 。

彼らのデモを見てみましょう: http://bennadel.github.io/AngularJS-Routing/#/pets/cats/10/medical-history [背景] 、[ダイエット]、[医療履歴] のタブと、ページが更新されないことに注意してください。

ただし、このソリューションは非常に複雑で、多くの非ネイティブから角度のあるものを使用しています。

私はまだこの単純な問題に対するより簡単な解決策を探しています。

于 2013-07-10T13:20:23.547 に答える