AngularJS中的上一步

Previous Step in AngularJS

本文关键字：一步 AngularJS      更新时间：2024-04-02

我是AngularJS的新手。我想在AngularJS中创建一个Previous函数。我创建了单页应用程序，它由表单组成，表单有多个步骤。我已经用这个代码创建了我的表单步骤。

<form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">
    <div ng-show="step==1">
    <div ng-form='step1form'>
    </div>
    </div>
</form>

我在网上得到了这个，但我不明白如何在AngularJS中工作。在这个在线表单中，他们创建了一个字段集。我已经迈出了步伐。如何使以前的函数变成这样？

    $(".previous").click(function(){
    //if(animating) return false;
    animating = true;
        current_fs = $(this).parent();
        previous_fs = $(this).parent().prev();
        //de-activate current step on progressbar
        $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
        //show the previous fieldset
        previous_fs.show();
        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
            step: function(now, mx) {
                //as the opacity of current_fs reduces to 0 - stored in "now"
                //1. scale previous_fs from 80% to 100%
                scale = 0.8 + (1 - now) * 0.2;
                //2. take current_fs to the right(50%) - from 0%
                left = ((1-now) * 50)+"%";
                //3. increase opacity of previous_fs to 1 as it moves in
                opacity = 1 - now;
                current_fs.css({'left': left});
                previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
            },
            duration: 800,
            complete: function(){
                current_fs.hide();
                animating = false;
            },
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
        });
});

将step变量移动到控制器，然后在从一个窗体移动到另一个窗体时递增/递减：

HTML:

<div ng-controller="MyCtrl"
    <!-- no ng-init anymore -->
    <form name='myform' id="myform"
          ng-submit="submitForm(myform.$valid)">
        <div ng-show="step==1">
          <div ng-form='step1form'>
          </div>
        </div>
        <button ng-show="step > 1" ng-click="previous()">Previous</button>
        <button ng-show="step < maxStep" ng-click="next()">Next</button>
    </form>
</div>

JS：

function MyCtrl($scope) {
    $scope.step = 1;
    $scope.maxStep = 100; // <-- Maximum num. of steps in the form.
    $scope.previous = function() { $scope.step -= 1; }
    $scope.next = function() { $scope.step += 1; }
}

动画原则上应该更改为由.ng-enter/.ng-leave类触发的CSS动画。否则，您将需要自定义指令。

相关文章：