Question

我扩展了一个用HTML和AngularJS编写的Web表单。在将一些注册信息填入表单后，表单必须消失，同时必须出现已确认的div。注册后隐藏表单是正确的，但显示确认的div不起作用因为conformationSown未定义，而此变量的声明方式与formHidden相同。这些变量在文件“labController.js”中声明。

的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'
    ]
);

Answer 1

您需要在表单之外移动成功提醒：

<form ng-hide = "formHidden" class="form-horizontal" name="form" novalidate>
    ...
</form>

<div ng-show = "conformationShown" class="alert alert-success">
  Confirmed!
</div>

Eample Plunkr

AngularJS中的第二个变量未定义，但以相同的方式声明

1 个答案: