AngularJS中的上一步

Question

我是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'
        });
});

Answer 1

将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动画。否则，您需要自定义指令。