Question

单击清除按钮时，我试图清除文本字段。这是我在我的系统中尝试过的代码，但我仍然没有得到结果。因为我是Angular的新手，我为我所犯的愚蠢错误道歉。

HTML代码

  <!DOCTYPE html>
    <html>
    <head>
        <title>Creation Form</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="../controllers/clearbutton.js"></script>
    </head>

    <body>

        <div class="container">
            <h2 style="text-align: center"><b>Create User</b></h2>

            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" style="text-align: center">


                            Enter your details
                        </h4>
                    </div>

                    <div class="panel-body">

                        <div class="row" ng-app="myApp" ng-controller="clear">


                            <div class="col-sm-4 form-group col-md-4 col-xs-12">
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                    <input type="text" class="form-control" placeholder="Name" name="callername" ng-model="callername"/>
                                </div>
                            </div>

                            <div class="col-sm-4 form-group col-md-4 col-xs-12">
                                <div class="input-group">

                                    <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                                    <input type="text" class="form-control" placeholder="User Code" name="usercode" ng-model="usercode" />

                                </div>
                            </div>



                            <div class="col-sm-4 form-group col-md-4 col-xs-12">
                                <div class="input-group">
                                    <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></div>
                                    <input type="text" class="form-control" placeholder="Email" name="email" ng-model="email" />
                                </div>
                            </div>
                        </div>
     <div class="pull-right">

                            <button type="submit" class="btn btn-primary ">Invite</button>

                            <button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </body>
    </html>

Angular JS代码

 angular.module('myApp', [])
        .controller('clear', ['$scope', function ($scope) {

            $scope.clear = function () {
                $scope.callername = "";
                $scope.volunteercode = "";
                $scope.email = "";
                console.log($scope.callername);
                console.log($scope.usercode);
                console.log($scope.email);
            };

        }]);

Answer 1

您没有在清除功能中使用正确的ng-model变量，也没有清除按钮。试试这样：

＆＃13;

angular.module('myApp', [])
  .controller('clear', ['$scope',
    function($scope) {

      $scope.clear = function() {
        console.log($scope.callername);
        console.log($scope.usercode);
        console.log($scope.email);
        $scope.callername = "";
        $scope.usercode = "";
        $scope.email = "";

      };

    }
  ]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Creation Form</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="../controllers/clearbutton.js"></script>
</head>

<body>

  <div class="container">
    <h2 style="text-align: center"><b>Create User</b></h2>

    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title" style="text-align: center">


                            Enter your details
                        </h4>
        </div>

        <div class="panel-body">

          <div class="row" ng-app="myApp" ng-controller="clear">


            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">
                <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
                </div>
                <input type="text" class="form-control" placeholder="Name" name="callername" ng-model="callername" />
              </div>
            </div>

            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">

                <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i>
                </div>
                <input type="text" class="form-control" placeholder="User Code" name="usercode" ng-model="usercode" />

              </div>
            </div>



            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">
                <div class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i>
                </div>
                <input type="text" class="form-control" placeholder="Email" name="email" ng-model="email" />
              </div>
            </div>

            <div class="col-sm-4 form-group col-md-4 col-xs-12">
              <div class="input-group">
                <input type="button" value="clear" class="btn btn-primary" ng-click="clear()" />

              </div>
            </div>

          </div>

        </div>
      </div>

    </div>
  </div>
</body>


</html>

＆＃13;

Answer 2

这是我制作的测试及其工作原理，我假设你使用1.5或以上的角度而不是2

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">

<input type=button ng-click=clear() value="clear">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";

    $scope.clear = function() {
        $scope.name = "";
    }
});
</script>

您必须使用ng-click将click事件绑定到按钮

Answer 3

您的代码中存在问题。您在控制器范围之外定义了按钮。控制器＆amp;

中定义的路线

<div class="row" ng-app="myApp" ng-controller="clear">

按钮是在另一个div中定义的，它不在控制器下面。这就是你没有得到结果的原因

试试这个。

<html ng-app="myApp">
<body ng-controller="clear">

你会得到结果。

Angular JS用于清除按钮

3 个答案: