Question

输出图片：

output image

我尝试将原始代码与此进行比较，但我无法发现任何错误。我很困惑为什么这不起作用。当重新加载页面或单击重置按钮时，所有字段都必须填充详细信息但不会发生。可能是什么错误？

<html>
 <head>
 <title>Angular practice</title>
 </head>
 <body>
 <div ng-app="" ng-controller="studentController">
    <form name="studentForm" novalidate>
    <table>
        <tr>
            <td>first name</td>
            <td><input name="firstname" type="text" ng-model="firstName"       required>
                <span style="color: red;" ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                    <span ng-show="studentForm.firstname.$error.required">enter first name</span>
                </span>
            </td>
        </tr>
        <tr>
            <td>last name</td>
            <td><input name="lastname" type="text" ng-model="lastName" required>
            <span style="color: red;" ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
                    <span ng-show="studentForm.lastname.$error.required">enter last name</span>
                </span>
            </td>
        </tr>
        <tr>
            <td>email</td>
            <td><input name="email" type="email" ng-model="email" required>
            <span style="color: red;" ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
                    <span ng-show="studentForm.email.$error.required">enter email ID</span>
                    <span ng-show="studentForm.email.$error.email">Invalid email</span>
                </span>
            </td>
        </tr>
        <tr>
            <td><button ng-click="reset()">Reset</button></td>
            <td><button ng- disabled="studentForm.firstname.$dirty &&
                                        studentForm.firstname.$invalid ||
                                        studentForm.lastname.$dirty && studentForm.lastname.$invalid||
                                        studentForm.email.$dirty && studentForm.email.$invalid" 
                        ng-click="submit()">Submit</button>
            </td>
        </tr>
        </table>
    </form>
    </div>

    <script>
        function studentController($scope){
            $scope.reset = function(){
                $scope.firstName = "uthej";
                $scope.lastName  = "ks";
                $scope.email     = "uthej@gmail.com";
            }
            $scope.reset();
        }
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>

Answer 1

您的HTML代码中缺少

ng-app，并且您没有在应用中注入控制器。

HTML代码

<div ng-app="myApp" ng-controller="studentController">

Js代码

var app = angular.module('myApp', []);
app.controller('studentController', function ($scope) {
    $scope.reset = function () {
        $scope.firstName = "uthej";
        $scope.lastName = "ks";
        $scope.email = "uthej@gmail.com";
    }
    $scope.reset();
});

Answer 2

你有拼写错误的HTML＆amp;脚本，正确的是..

HTML ::

<div ng-app="demoApp" ng-controller="studentController">
    <form name="studentForm" novalidate>
        // form fields will goes here....
    </form>
</div>

＆安培;脚本::

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script>
        var app = angular.module("demoApp", []);
        app.controller("studentController", function($scope){
            $scope.reset = function(){
                $scope.firstName = "uthej";
                    $scope.lastName  = "ks";
                    $scope.email     = "uthej@gmail.com";
            };$scope.reset();

        });
    </script>

我希望它对你有用。

当我单击重置按钮或加载此页面时，所有字段都为空

2 个答案: