如何使用角度路由通过超链接传递数据

时间:2016-09-06 04:16:15

标签: angularjs angular-routing

Html代码

 <div ng-init="initAppliedJob()" style="padding:25px;" >
 <table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>ApplicantID</th>
            <th>Username</th>                
            <th>Edit</th>           
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="obj in initAppliedJobObj">
            <td>{{obj.ApplicantID}}</td>
            <td>{{obj.Username}}</td>        
            <td><a href="/admin/home/appliedlist/:{{obj.loginid}}">Edit</a></td>               
        </tr>
    </tbody>
 </table>
</div>

Angular Route

app.config([
'$locationProvider', '$routeProvider',
function ($locationProvider, $routeProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    }).hashPrefix('!');

    $routeProvider
          .when('/admin/home/appliedlist', { 
        templateUrl: '/AngularTemplates/jobAppliedList.html',
        controller: 'JobApplyController'
    })
    .when('/admin/home/appliedlist/:userid1', { 
        templateUrl: '/AngularTemplates/jobAppliedList1.html',
        controller: 'JobApplyController'
    })
    .otherwise({   // This is when any route not matched => error
        templateUrl: '/AngularTemplates/help.html',
        controller: 'JobApplyController'
    })
}]);

控制器

 app.controller('JobApplyController', function ($scope, appliedJobService, $routeParams) {

alert($routeParams.userid1);    
$scope.initAppliedJob = function () {
    var getData = appliedJobService.initAppliedJob();
    getData.then(function (emp) { $scope.initAppliedJobObj = emp.data; },
    function (response) { document.write(response.status + "<br/>" + response.data); });
}
});

当我点击编辑按钮时,我使用角度路由,我的超链接显示为
       http://localhost:1395/admin/home/appliedlist/:14

在控制器中,我在警告框中获得价值“:14”

问题:

1)我只想要价值14:14因为每次我必须拆分该值才能得到原始值
2)我的路由器转到其他部分意味着没有检测到这部分
   。当( '/管理/家/ appliedlist /:userid1'

如何解决这个问题?

提前致谢。

1 个答案:

答案 0 :(得分:0)

变化

 href="/admin/home/appliedlist/:{{obj.loginid}}

href="#/admin/home/appliedlist/{{obj.loginid}}
相关问题