Angularjs將參數從ng-click傳遞到頁面

我在頁面頂部有三個按鈕，下面有輸入框。與路線Angularjs將參數從ng-click傳遞到頁面

<div> 
    <form> 
      <div> 
       Enter Show Name<input type="text" ng-model="showName" /> 
      </div> 
     </form> 
</div> 
<div> 
<button ng-click="href="/api/renameShow"">Rename Show</button> 
<button ng-click="href="/api/updateShow"">Update Show</button> 
<button ng-click="href="/api/checkShow"">Check Show</button> 
</div>

我的模塊代碼是

var showApp = angular.module("showApp", ["ngRoute", "ngResource", "ui"]). 
    config(function ($routeProvider, $locationProvider) { 
     $routeProvider. 
      when('/', 
      { 
       controller: '', 
       templateUrl: 'main.html' 
      }). 
      when('/api/renameShow', { controller: 'renameShowCtrl', templateUrl:  '/templates/renameShow.html' }). 
      when('/api/updateShow', { controller: 'updateShowCtrl', templateUrl:  '/templates/updateShow.html' }). 
when('/api/checkShow', { controller: 'checkShowCtrl', templateUrl: '/templates/checkShow.html' });

基本上什麼，我試圖做的是，當點擊一個按鈕的NG-點擊調用傳遞參數「showName」的corrosponding頁用它。請讓我知道如何解決它。由於

來源

2014-03-19 J. Davidson

是否有任何特定的原因使用按鈕，你可以改爲使用錨點href =「/ api/checkShow/{{showName}}」並在路由處理它與/ api/checkShow /：編號 –

所以它會像這在路由？當（'/ api/checkShow /：id'，{controller：'checkShowCtrl'，templateUrl：'/templates/checkShow.html'}） –

是的，你可以參考這個http://docs.angularjs.org/api/ngRoute/service/$ route –

所有你需要告訴你的目的地控制器期待並接受一個參數，當我們瀏覽到該頁面（你指的是網頁）的第一：

$routeProvider.when('/api/renameShow/:showName?', { 
    controller: 'renameShowCtrl', 
    templateUrl:  '/templates/renameShow.html' 
})

參數表示後問號它是一個可選參數。你可以達到同樣的錨標籤：

<a href="#/view2/mike">Go to view 2</a>

如果你堅持使用按鈕，編寫自定義函數鉤住按鈕的NG-點擊，然後通過你想要的任何參數，這樣您電流控制器：

<button ng-click="customNavigate('Mike')">Rename Show</button>

而在所述控制器：

$scope.customNavigate=function(msg){ 
     $location.path("/view2"+msg) 
    }

，然後在目的地的控制器：

app.controller("renameShowCtrl",function($scope,$routeParams){ 
    $scope.showName=$routeParams.showName 
});

來源

2014-03-19 05:33:59

我想你錯過了一個斜線的路徑：$ scope.customNavigate = function（味精）{ $ location.path（「/ view2 /」+味精） } – Sagi

否則很好的答案。 – Sagi

說，我們需要在psoid sodtl.htm：

在HTML - so.html：

<tr ng-controller="SoController" ng-repeat="x in sos"> 
      <td>{{x.date}}</td> 
      <td><a href="#/sodtl/{{x.soid}}">Dtl</a></td> 
</tr>

在AngularJs - app.js - 配置：

app.config(function ($routeProvider) 
    {  
     $routeProvider. 
     when ('/sodtl/:psoid?', 
       { 
        templateUrl : 'pages/sodtl.html', 
        controller : 'SoDtlController' 
       } 
      ) 
    });

In Controller - app.js：

app.controller('SoDtlController', function ($scope, $http, $location, $routeParams) { 
    $scope.message = " $routeParams.psoid = " + $routeParams.psoid; 
});

因此，您可以使用psoid顯示sodtl.html頁面中的數據。

來源

2017-07-29 20:00:16 Kaps

Angularjs將參數從ng-click傳遞到頁面

回答

相關問題