我有一个问题，我需要填写表单并自动更新进度条。可以切换from，因此输入的数量可能会有所不同（不能保证始终是静态的6或7个输入）。
下面的片段看起来很乱，只是因为引导美化
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 /更多输入可以切换，禁用等。
答案 0 :(得分：0)
为不同的表单维护不同的进度条。 您将了解每个表单的输入数量，因此按输入数量计算100％。在填写并验证每个输入（电子邮件，电话号码等）后，您可以提高填充百分比并将其存储在范围变量中。 即使切换表单，您也可以继续使用范围变量（填充字段）或将其设置为0。