在每次输入完成及其验证后更新进度条 (bootstrap)

Question

我有一个问题，我需要填写表格并自动更新进度条。 from 可以切换，因此输入的数量可能会有所不同（不能保证 6 或 7 个输入的数量始终是静态的）。

下面的片段看起来很乱只是因为 bootstrap 美化

const app = angular.module('myApp', ['ui.bootstrap']);
signUpCtrl.$inject = ["$scope", "uibDateParser"];
app.controller("signUpCtrl", signUpCtrl);


function signUpCtrl($scope, uibDateParser) {
  $scope.model = {};
  $scope.formType = "student";

  $scope.submitStudent = function() {
    console.log($scope.model);
  }

  $scope.submitTeacher = function() {
    console.log($scope.model);
  }

  $scope.changeForm = function(type) {
    $scope.formType = type;
  }

}

<html ng-app="myApp">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div ng-controller="signUpCtrl">

    <div ng-switch="formType">
      <div ng-switch-when="student">
        <div class="form-group">
          <h3>Sign up as a student</h3>
          <form name="signupForm" ng-submit="submitStudent()">
            <div class="input-group" ng-class="{ 'has-success': signupForm.firstname.$valid && signupForm.firstname.$dirty, 'has-error': !model.name && signupForm.firstname.$dirty }">
              <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
              <input class="form-control" type="text" name="firstname" ng-model="model.name" placeholder="First name">
            </div>
            <div class="input-group" ng-class="{ 'has-success': signupForm.lastname.$valid && signupForm.lastname.$dirty, 'has-error': !model.surname && signupForm.lastname.$dirty }">
              <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
              <input class="form-control" type="text" name="lastname" ng-model="model.surname" placeholder="Last name">
            </div>
            <div class="input-group" ng-class="{ 'has-success': signupForm.username.$valid && signupForm.username.$dirty, 'has-error': !model.username && signupForm.username.$dirty }">
              <span class="input-group-addon"><i class="fa fa-user-circle fa-fw"></i></span>
              <input class="form-control" type="text" name="username" ng-model="model.username" placeholder="Username">
            </div>
            <div class="input-group" ng-class="{ 'has-success': signupForm.dob.$valid, 'has-error': !model.dob && signupForm.dob.$dirty }">
              <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span>
              <input class="form-control" type="text" name="dob" ng-model="model.dob" uib-datepicker-popup="{{'d!/M!/yyyy'}}" required placeholder="DD/MM/YYYY">
            </div>
            <div class="input-group" ng-class="{ 'has-success': signupForm.email.$valid, 'has-error': signupForm.email.$invalid && signupForm.email.$dirty }">
              <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
              <input class="form-control" type="email" name="email" ng-model="model.email" required placeholder="Email address">
            </div>
            <div ng-class="{ 'has-success': signupForm.pass.$valid && signupForm.pass2.$valid && signupForm.pass.$dirty && signupForm.pass2.$dirty, 'has-warning': (model.password.length < 6 && model.password_confirm.length < 6) && signupForm.pass.$dirty && signupForm.pass2.$dirty, 'has-error': (model.password != model.password_confirm) && signupForm.pass.$dirty && signupForm.pass2.$dirty }">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                <input class="form-control" type="password" name="pass" ng-model="model.password" placeholder="Password">
              </div>
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-unlock-alt fa-fw"></i></span>
                <input class="form-control" type="password" name="pass2" ng-model="model.password_confirm" placeholder="Confirm password">
              </div>
            </div>

            <div class="progress">
              <div class="progress-bar progress-bar-success  progress-bar-striped active" role="progressbar" aria-valuenow="{{count}}" aria-valuemin="0" aria-valuemax="7" ng-style="{'width': count*(100/7)+'%'}">
                <span ng-show="count && count<7">{{count}}/7</span>
                <span ng-show="count && count==7">Completed</span>
              </div>
            </div>

            <button class="btn btn-success" type="submit" ng-disabled="count != 7">Sign up</button>
          </form>
        </div>

        <button class="btn btn-info" type="button" ng-click="changeForm('teacher')">I am a teacher</button>
      </div>

      <div ng-switch-when="teacher">
        <div class="form-group">
          <h3>Sign up as a teacher</h3>
          <form name="signupForm" ng-submit="submitTeacher()">
            <div class="input-group margin-bottom-sm">
              <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
              <input class="form-control" type="text" ng-model="model.name" placeholder="First name">
            </div>
            <div class="input-group margin-bottom-sm">
              <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
              <input class="form-control" type="text" ng-model="model.surname" placeholder="Last name">
            </div>
            <div class="input-group margin-bottom-sm">
              <span class="input-group-addon"><i class="fa fa-user-circle fa-fw"></i></span>
              <input class="form-control" type="text" ng-model="model.username" placeholder="Username">
            </div>
            <div class="input-group margin-bottom-sm">
              <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
              <input class="form-control" type="text" ng-model="model.email" placeholder="Email address">
            </div>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
              <input class="form-control" type="password" ng-model="model.password" placeholder="Password">
            </div>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-unlock-alt fa-fw"></i></span>
              <input class="form-control" type="password" ng-model="model.password_confirm" placeholder="Confirm password">
            </div>

            <div class="progress">
              <div class="progress-bar progress-bar-success  progress-bar-striped active" role="progressbar" aria-valuenow="{{count}}" aria-valuemin="0" aria-valuemax="6" ng-style="{'width': count*(100/6)+'%'}">
                <span ng-show="count && count<6">{{count}}/6</span>
                <span ng-show="count && count==6">Completed</span>
              </div>
            </div>

            <button class="btn btn-success" type="submit" ng-disabled="count != 6">Sign up</button>
          </form>
        </div>

        <button class="btn btn-info" type="button" ng-click="changeForm('student')">I am a student</button>
      </div>
    </div>

    <h3><small>This button updates progress manualy:</small></h3>
    <button class="btn btn-info" ng-click="count = count + 1">Testing</button>

  </div>
</body>

可以使用 $watch，但我不确定这是否是解决我的问题的最佳方法。我需要它知道有 6/7/更多的输入可以切换、禁用等。

Answer 1

为不同的表单维护不同的进度条。您将了解每个表单的输入数量，因此按那里的输入数量计算 100%。在填写并验证每个输入（电子邮件、phone 号码等）后，您可以提高填充金额的百分比并将其存储在范围变量中。即使切换了表单，您也可以继续使用范围变量（填充字段）或将其设为 0。

在每次输入完成及其验证后更新进度条 (bootstrap)

Updating progress bar (bootstrap) after each input completion and its validation

angularjs

angular-ui-bootstrap