如何導航到其他頁面並單擊ng表單中的相應數據

我有一個視圖讓我們假設index.cshtml哪個使用服務獲取數據並在表中顯示每行可點擊。當我點擊一行後，它應該導航到其他頁面，讓我們稱它爲details.html與特定行的相應信息。如何導航到其他頁面並單擊ng表單中的相應數據

`<table class="table table-bordered table-condensed table-hover table-responsive"> 
      <thead> 
       <tr class="bg-primary"> 
        <th>Id</th> 
        <th>Name</th> 
        <th>Description</th> 
        <th>Role</th> 
       </tr> 
      </thead> 
      <tbody ng-repeat="user in Users"> 
       <tr ng-click="GetUser(Users,user.userLoginID)" style="cursor:pointer" > 
        <td>{{ user.userLoginID }}</td> 
        <td>{{ user.userName }}</td> 
        <td>{{ user.descOfUser }}</td> 
        <td>{{ user.userRole }}</td> 
       </tr> 
      </tbody> 
     </table>`

我正面臨的問題是如何使用行數據導航到其他頁面。我嘗試使用query string但查詢字符串我角停止在該頁面上工作。請告訴我是否必須使用angular-route那麼該怎麼做。

來源

2016-01-11 Gupteshwari

更改您的代碼如下圖所示，並鏈接獲取詳細信息，

<tbody> 
<tr ng-repeat="user in Users"> 
       <td>{{ user.userLoginID }}</td> 
       <td>{{ user.userName }}</td> 
       <td>{{ user.descOfUser }}</td> 
       <td>{{ user.userRole }}</td> 
       <td><a href="#/user-details/{{user.userLoginID }}" class="btn">&nbsp;<i class="glyphicon glyphicon-edit"></i>&nbsp; details</td> 
      </tr>

後創建details.html頁的路線，

app.config(['$routeProvider', 
function($routeProvider) { 
$routeProvider. 
    when('/', { 
    templateUrl: '/users.html', 
    controller: 'listCtrl' 
    }) 
    .when('/user-details/:userLoginId', { 
    templateUrl: '/details.html', 
    controller: 'detailsCtrl', // this is new controller name 
    }) 
    .otherwise({ 
    redirectTo: '/' 
    }); 
}]);

現在創建用userId作爲routeParameter以獲得特定用戶的詳細信息。

然後創建得到一個控制器和顯示特定用戶的詳細信息，

app.controller('detailsCtrl', function ($scope, $location, $routeParams) { 
    // call service to get details 
    // get the user id like this "$routeParams.userLoginId" 
});

最後，在顯示頁面details.html細節。

來源

2016-01-11 06:29:24 Thangadurai

我會這樣做的方式是：數據應該在控制器或服務中引用，您的ng-click應該是一個鏈接。像<a ng-href="/user/{{userLoginID}}">details</a>。

在您的路線中，您可以創建一個參數化路線，如user/:id，並在您的新控制器中使用$routeParams來知道訪客尋找哪個用戶並將該ID傳遞給您的服務以獲取正確信息。

如果你想按照你的要求去做，你可以將這些信息作爲get參數傳遞給你的新路線，但是它會變得更加混亂和不安全。

來源

2016-01-11 05:54:18

好吧，你的意思是說''應該是一個鏈接而不是'js函數調用'？ – Gupteshwari

是的，tr不能是一個鏈接，所以你將不得不修改標記，或者在某些或全部td中添加一個錨點。 –

這是一個如何配置路線的例子https://docs.angularjs.org/api/ngRoute/service/$route#example –

如何導航到其他頁面並單擊ng表單中的相應數據

回答

相關問題