0
我擴展了一個用HTML和AngularJS編寫的Web表單。一些註冊信息填入表格後，表格必須消失，同時必須出現確認的div。註冊後隱藏表單工作正確，但顯示已確認的div不起作用，因爲conformationShown未定義，而此變量以與formHidden相同的方式聲明。這些變量在文件「labController.js」中聲明。AngularJS中的第二個變量未定義，但以相同的方式聲明
的index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Tony's Pizza - New User Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
</head>
<body ng-controller="labController">
<div class="container">
<h1>New User Registration</h1>
<form ng-hide = "formHidden" class="form-horizontal" name="form" novalidate>
<div class="form-group">
<div class="col-md-2">
<label>Username</label>
</div>
<div class="col-md-5">
<input type="text" name="username" class="form-control" ng-model="model.username" required>
<div class="alert alert-danger" ng-show="(form.username.$touched || form.$submitted) && form.username.$error.required">
Username is required
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label>Password</label>
</div>
<div class="col-md-5">
<input type="password" name="password" class="form-control" ng-model="model.password" required>
<div class="alert alert-danger" ng-show="(form.password.$touched || form.$submitted) && form.password.$error.required">
Password is required
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label>Name</label>
</div>
<div class="col-md-5">
<input type="text" name="name" class="form-control" ng-model="model.name" required>
<div class="alert alert-danger" ng-show="(form.name.$touched || form.$submitted) && form.name.$error.required">
Name is required
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label>Phone Number</label>
</div>
<div class="col-md-5">
<input type="number" name="phone" class="form-control" ng-model="model.phone" ng-required="true">
<div class="alert alert-danger" ng-show="(form.phone.$touched || form.$submitted) && form.phone.$error.required">
Phone is required
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label>Email Address</label>
</div>
<div class="col-md-5">
<input type="email" name="emailAddress" class="form-control" ng-model="model.email" ng-required="true">
<div class="alert alert-danger" ng-show="(form.emailAddress.$touched || form.$submitted) && form.emailAddress.$error.required">
Email Address is required
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label>Favorite Pizza</label>
</div>
<div class="col-md-5">
<select name="favorite" class="form-control" ng-model="model.favorite" ng-required="true">
<option>Cheese Pizza</option>
<option>Pepperoni Pizza</option>
<option>Margherita Pizza</option>
<option>BBQ Chicken Pizza</option>
<option>Combo Pizza</option>
</select>
<div class="alert alert-danger" ng-show="(form.favorite.$touched || form.$submitted) && form.favorite.$error.required">
Favorite is required
</div>
</div>
</div>
<div ng-show = "conformationShown" class="alert alert-success">
Confirmed!
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-5">
<input type="submit" value="Submit" class="btn btn-primary" ng-click="submit(model)" ng-disabled="form.$invalid" />
<button class="btn btn-default">Reset</button>
</div>
</div>
</form>
<pre>{{model | json}}</pre>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.min.js"></script>
<script src="/app/registrationService.js"></script>
<script src="/app/app.js"></script>
<script src="/app/labController.js"></script>
</body>
</html>
labController.js
app.controller('labController', [
'$scope', 'registration',
function ($scope, registration) {
var formHidden = false;
var conformationShown = false;
$scope.formHidden = formHidden;
$scope.conformationShown = conformationShown;
$scope.reset = reset;
$scope.submit = submit;
reset();
function submit(model) {
registration.submit(model).$promise
.then(function (response) {
alert('User registered');
$scope.formHidden = true;
$scope.conformationShown = true;
console.log(conformationShown);
},
function (response) {
alert('An error occured');
});
}
function reset() {
$scope.model = {};
}
}
]);
registrationServices.js
angular.module('registrationService', ['ngResource']).
factory('registration', [
'$resource',
function ($resource) {
return $resource('https://reqres.in/api/register',
{},
{
submit: {
method: 'POST'
},
});
}
]);
app.js
var app = angular.module('app',
[
'ngResource',
'registrationService'
]
);
但是你的成功警報_inside_您的形式，當然當窗體消失，它會被隱藏。 – Und3rTow
你能爲同樣的創建plunkr嗎？ – Deepa
你的「formHidden」被設置爲true，這將隱藏你的表單，你的成功div在這個表單內，我猜這也會被隱藏。den – Deepa