Question

我有一个HTML文件，我正在其中实现ui-routing。

这是index.html文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Lawyer SignUp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">
    <script src="angular.min.js"></script>
    <script src="angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
    <div class="form-container">
        <span class="signup-heading">Lawyer SignUp Form</span>
        <div ui-view></div>
        <div class="nav-button">
            <button ng-click="back();">Back</button>
            <a ui-sref="{{ tab }}"><input type="submit" name="Next" value="Next" ng-click="next()"></a>
        </div>
    </div>
</body>
</html>

这是我的app.js文件：

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/user-detail');

    $stateProvider

        .state('user-detail', {
        url: '/user-detail',
        templateUrl: 'user-detail.html',
        controller: 'myCtrl'
    })
    .state('1', {
        url: '/1',
        templateUrl: 'legal-info.html'
    })

    .state('2', {
        url: '/2',
        templateUrl: 'basic-detail.html'
    })

    .state('3', {
        url: '/3',
        templateUrl: 'bar-info.html'
    })    

    })

myApp.controller('myCtrl', function($scope, $window) {

    $scope.tab = 1

    $scope.next = function(){

        $scope.tab_id = $scope.tab + 1

    }

    $scope.back = function(){

        $window.history.back();

    }

})

我希望每次单击下一个按钮时标签都会增加1，这样我就可以通过单击下一个按钮来路由到每个页面。

最初是1，然后点击下一步它应该增加到2，如果再次点击它，它应该增加到3，但每次都初始化为1。

增加ui-router中的变量

0 个答案: