Angularjs多步表单

来源：互联网发布：小学生口语打卡软件编辑：程序博客网时间：2024/06/11 11:58

该小app设计到路由，动画

index.html

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="bootstrap.min.css">
        <link type="image/x-icon" href="logo.png" rel="shortcut icon">
        <script src="jquery.min.js"></script>
        <script src="angular.js"></script>
        <script src="angular-animate.js"></script>
        <script src="angular-ui-router.js"></script>
        <script src="bootstrap.min.js"></script>
        <script type="text/javascript">
            angular.module('formApp', ['ngAnimate', 'ui.router'])

            // configure routes
            .config(function($stateProvider, $urlRouterProvider) {

                $stateProvider
                .state('form', {
                    url: '/form',
                    templateUrl: 'form.html',
                    controller: 'formController'
                })

                .state('form.profile', {
                    url: '/profile',
                    templateUrl: 'form-profile.html'
                })

                .state('form.interests', {
                    url: '/interests',
                    templateUrl: 'form-interests.html'
                })

                .state('form.payment', {
                    url: '/payment',
                    templateUrl: 'form-payment.html'
                });

                $urlRouterProvider.otherwise('/form/profile');
            })

            .controller('formController', function($scope) {

                $scope.formData = {};

                $scope.processForm = function() {
                    console.log('please validate form..')
                };

            });
        </script>
        <style type="text/css">
            body { padding-top:20px; }

            /* form styling */
            #form-container { background:#2f2f2f; margin-bottom:20px;
                border-radius:5px; }
            #form-container .page-header { background:#151515; margin:0; padding:30px;
                border-top-left-radius:5px; border-top-right-radius:5px; }

            /* numbered buttons */
            #status-buttons { }
            #status-buttons a { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }
            #status-buttons a:hover { text-decoration:none; }

            /* we will style the span as the circled number */
            #status-buttons span { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; border-radius:50%; }

            /* active buttons turn light green-blue*/
            #status-buttons a.active span { background:#00BC8C; }

            label, h3{
                color: #fff;
            }

            /* ANIMATION STYLINGS
            ============================================================================= */
            #signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; }
            #form-views { width:auto; }

            /* basic styling for entering and leaving */
            /* left and right added to ensure full width */
            #form-views.ng-enter,
            #form-views.ng-leave { position:absolute; left:30px; right:30px;
                transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease;
            }

            /* enter animation */
            #form-views.ng-enter {
                -webkit-animation:slideInRight 0.5s both ease;
                -moz-animation:slideInRight 0.5s both ease;
                animation:slideInRight 0.5s both ease;
            }

            /* leave animation */
            #form-views.ng-leave {
                -webkit-animation:slideOutLeft 0.5s both ease;
                -moz-animation:slideOutLeft 0.5s both ease;
                animation:slideOutLeft 0.5s both ease;
            }

            /* ANIMATIONS
            ============================================================================= */
            /* slide out to the left */
            @keyframes slideOutLeft {
                to { transform: translateX(-200%); }
            }
            @-moz-keyframes slideOutLeft {
                to { -moz-transform: translateX(-200%); }
            }
            @-webkit-keyframes slideOutLeft {
                to { -webkit-transform: translateX(-200%); }
            }

            /* slide in from the right */
            @keyframes slideInRight {
                from { transform:translateX(200%); }
                to { transform: translateX(0); }
            }
            @-moz-keyframes slideInRight {
                from { -moz-transform:translateX(200%); }
                to { -moz-transform: translateX(0); }
            }
            @-webkit-keyframes slideInRight {
                from { -webkit-transform:translateX(200%); }
                to { -webkit-transform: translateX(0); }
            }
        </style>
    </head>
    <body ng-app="formApp">
        <div class="container">
            <div id="form-views" ui-view></div>
        </div>
    </body>

</html>

form.html

<div class="row">
   <div class="col-sm-8 col-sm-offset-2">
        <div id="form-container">
            <div class="page-header text-center">
                <h2>Let's Be Friends</h2>
                <div id="status-buttons" class="text-center">
                    <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
                    <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
                    <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
                </div>
            </div>
            <form id="signup-form" ng-submit="processForm()">
                <div id="form-views" ui-view></div>
            </form>
        </div>
        <pre>
            {{ formData }}
        </pre>
   </div>
</div>

添加基于状态的激活类

我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。

form-interests.html

<label>What's Your Console of Choice?</label>
<div class="form-group">
    <div class="radio">
        <label>
           <input type="radio" ng-model="formData.type" value="xbox" checked>
           I like XBOX
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" ng-model="formData.type" value="ps">
            I like PS4
        </label>
    </div>
</div>
<div class="form-group row">
    <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="form.payment" class="btn btn-block btn-info">
            Next Section <i class="icon-arrow-right"></i>
        </a>
    </div>
</div>

form-payment.html

<div class="text-center">
    <span class="glyphicon glyphicon-heart"></span>
    <h3>Thanks For Your Money!</h3>
    <button type="submit" class="btn btn-danger">Submit</button>
</div>

form-profile.html

<div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" name="name" ng-model="formData.name">
</div>
<div class="form-group">
    <label for="email">Email</label>
    <input type="text" class="form-control" name="email" ng-model="formData.email">
</div>
<div class="form-group row">
   <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="form.interests" class="btn btn-block btn-info">
           Next Section <i class="icon-arrow-right"></i>
        </a>
   </div>
</div>

0 0