web-dev-qa-db-ja.com

AngularJS：ng-hrefを介して複数のパラメーターをコントローラーに渡す方法は？

レコードを更新するための編集ボタンを含むテーブルがあります。単一のidをng-hrefに渡すと、正常に機能し、フォームページが開きます。

例：私のindex.htmlテーブル内

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}">Edit</a>

しかし、次のようにrow._idとともにもう1つのパラメーターをng-hrefに渡したいと思います。

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>

動作せず、ホームページにリダイレクトされます。

これが私のコントローラーです：

    $timeout(function () {
        if ($routeParams.id !== undefined) {                
            $http.get('/providerlist/'+$routeParams.id, {
                params:{
                    id:$routeParams.id, 
                    collectionName:$routeParams.collectionName
                }
            }).success(function (response) {
                alert(response);
                $scope.providerList = response;
                $scope.id = response['_id'];
            });
        }
    });

ルーティング用のapp.js：

var ProviderApp = angular.module('ProviderApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'templates/home/index.html',
        controller: 'HomeController',
        controllerAs: 'home'
    })

    .when('/provider', {                            
        templateUrl: 'templates/provider/index.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })                        
    .when('/provider/:id', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })                        
    .otherwise({
        redirectTo: '/home'
    });
}]);

ここで私がしたいのは、editボタンをクリックした後、idとcollectionNameのパラメータ/データでform.htmlにリダイレクトすることです。

どんな助けでもいただければ幸いです。

javascriptangularjsmean-stack
4
J.K.A.

ng-hrefで複数のパラメータを使用する場合は、app.jsでルートURLも更新する必要があります。

ng-hrefで複数のパラメータを使用したが、このルートと一致するルートがない場合、otherwiseにリダイレクトされるhomeルートが機能しました。

あなたはそれを試すことができます。

hTMLで：

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>

app.jsに次のようなルートを追加します

.when('/provider/:id/collectionName/:cName', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'YourController'
    });

コントローラーでは、次のように変更する必要があります。

 $http.get('/providerlist/'+$routeParams.id +'/collectionName/'+ $routeParams.cName)
 .success(function (response) {
     alert(response);
     $scope.providerList = response;
     $scope.id = response['_id'];
 });

したがって、サーバー側のルートは次のようになります。/providerlist/:id/collectionName/:cName

7
Shaishab Roy

NgRouteパスのパスには、コロンで始まり、：name *のような星で終わる名前付きグループを含めることができます。ルートが一致すると、すべての文字が指定された名前で$ routeParamsに熱心に格納されます。

たとえば、次のようなルート：/ color /：color/largecode /：largecode */edit

このサンプルURLの場合：/ color/brown/largecode/code/with/slashes/edit

そして抽出：

色：茶色

largecode：code/with/slashes。

だからあなたの場合、ルートは

.when('/provider/:id*\/collectionName/:collectionName*\', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })

これにより、結果のhrefリンクに特殊文字とスラッシュが含まれている場合でも、適切なコントローラーとページにリダイレクトされます...

1
damitj07