Question

我正在尝试创建一个清除按钮来清空输入字段的值。到目前为止，它清除了用户名文本框，但之后我无法再清除它，而且密码框也根本没有清除。

HTML：

<div class="list">
    <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="email" name="username" ng-model="username" ng-minlength="5" required>
    </label>
    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" data-ng-model="password" ng-minlength="6" required>
     </label>
 </div>

的Javascript

$scope.submit = function(username) {
    console.log("Thanks " + username);
};

$scope.submit = function(password) {
    console.log("Thanks " + password);
};

$scope.clear = function(username, password) {
    $scope.username = "";
    $scope.password = "";    
    console.log(username);
    console.log(password);   
};

Answer 1

这是一个有效的JSFiddle

HTML：

<div ng-app="myApp" ng-controller="dummy">
    <div class="list">
        <label class="item item-input"> <span class="input-label">Username</span>

            <input type="email" name="username" ng-model="username" ng-minlength="5" required>
        </label>
        <label class="item item-input"> <span class="input-label">Password</span>

            <input type="password" name="password" data-ng-model="password" ng-minlength="6" required>
        </label>
    </div>
            <button type="submit" ng-click="clear()">Clear</button>
</div>

JS：

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

    $scope.clear = function () {
        $scope.username = "";
        $scope.password = "";
        console.log(username);
        console.log(password);
    };

}]);

Answer 2

我做了working JSFiddle。

HTML：

<div ng-controller="MyCtrl">
    <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="email" name="username" ng-model="username" ng-minlength="5" required>
    </label>
    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password" name="password" ng-model="password" ng-minlength="6" required>
    </label>
    <button ng-click="clear()">Clear</button>
</div>

JS：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.username = 'Foo';
    $scope.password = 'Bar';

    $scope.clear = function () {
        $scope.username = '';
        $scope.password = '';    
        console.log($scope.username);
        console.log($scope.password);   
    };
});

Answer 3

嗨此解决方案适用于我请检查，

    <ion-content ng-controller="ExampleCtrl">
          <div class="list">
                <label class="item item-input">
                    <span class="input-label">Username</span>
                    <input type="email" name="username" ng-model="form.username" ng-minlength="5" required>
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="password" name="password" data-ng-model="form.password" ng-minlength="6" required>
                </label>
                <button class="button button-bar button-balanced" ng-click="submit()">Submit</button>
<button class="button button-bar button-balanced" ng-click="clear()">Clear</button>
            </div>
          </ion-content>

并在控制器中将功能代码更新为

.controller('ExampleCtrl', ['$scope', function ($scope) {
  $scope.form = "";
  $scope.submit = function(){
  console.log($scope.form.username);
  console.log($scope.form.password);
  }
  $scope.clear = function(){
    $scope.form="";
  }

}])

如有任何疑问，请回复

清除按钮angularjs

3 个答案: