Angularjs通过ng-click将参数传递给页面

Angularjs passing parameter to a page from ng-click

本文关键字：参数传递 通过 ng-click Angularjs      更新时间：2023-09-26

我的页面顶部有以下三个按钮，下面有输入框。

<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-click调用相应的页面传递参数"showName"与它。请告诉我如何修理它。由于

首先，你需要告诉你的目标控制器(你所引用的页面)，当我们导航到该页时，期望并接受一个参数:

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

参数后面的问号表示它是一个可选参数。您可以使用锚标记实现相同的目的:

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

如果你坚持使用按钮，写一个自定义函数挂钩到按钮的ng-click，然后传递任何你想要的参数，像这样从当前控制器:

<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
});

假设我们需要在sodt .htm:

In 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 - Config:

 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页面中的数据

相关文章：