AngularJSでクリアボタンで値を削除する

入力全体をクリアすることはできますが、その値が有効な場合にのみクリアされます。そうでないときは、それ以上クリアされません。AngularJSでクリアボタンで値を削除する

何かを追加する必要があり、私は手動で各ループを使用して行うことができます。しかし、私はこのソリューションとより小さなコードのようなものを避けるために探しているので、誰かがすでに解決策を考え出している可能性があります。私の現在のコードは次のとおりです。

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

 
app.controller('myCtrl', function($scope) { 
 

 
    $scope.input = {}; 
 

 
    $scope.clear = function() { 
 
    $scope.input = {}; 
 

 
    angular.forEach(angular.element("input"), function() { 
 
     _this = angular.element(key); 
 
     _this.val(""); 
 
    }); 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <form name="principalManagementForm"> 
 
     First Name: 
 
     <input type="text" ng-model="input.firstName" name="firstName" id="firstName" minlength="5"><span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span> 
 
     <br>Last Name: 
 
     <input type="text" ng-model="input.lastName" name="lastName" id="lastName" minlength="5"><span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span> 
 
     <br>Code: 
 
     <input type="text" ng-model="input.code" name="code" id="code" minlength="3"> <span ng-show="principalManagementForm.code.$invalid">Code not over 3</span> 
 
     <br> 
 
     <br> 
 
     <button ng-click="clear()">Clear</button> 
 

 
     {{ input }} 
 
    </form> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2016-03-22 Dean Christian Armada

無効な値とはどういう意味ですか？あなたのコードは私のために正常に動作しているようです。 –

あなたはどのブラウザを使用していますか？ –

申し訳ありませんが、間違ったコードを挿入しました。私は新しいコードを投稿しました –

だけallowInvalidフラグでng-model-optionsを使用します。

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

 
app.controller('myCtrl', function($scope) { 
 

 
    $scope.input = {}; 
 

 
    $scope.clear = function() { 
 
    $scope.input = {}; 
 

 
    angular.forEach(angular.element("input"), function() { 
 
     _this = angular.element(key); 
 
     _this.val(""); 
 
    }); 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 
    <form name="principalManagementForm"> 
 
     First Name: 
 
     <input type="text" ng-model="input.firstName" name="firstName" 
 
      id="firstName" minlength="5" ng-model-options="{allowInvalid: true}"> 
 
     <span ng-show="principalManagementForm.firstName.$invalid">First Name not over 5</span> 
 
     
 
     <br>Last Name: 
 
     <input type="text" ng-model="input.lastName" name="lastName" 
 
      id="lastName" minlength="5" ng-model-options="{allowInvalid: true}"> 
 
     <span ng-show="principalManagementForm.lastName.$invalid">Last Name not over 5</span> 
 
     
 
     <br>Code: 
 
     <input type="text" ng-model="input.code" name="code" id="code" 
 
      minlength="3" ng-model-options="{allowInvalid: true}"> 
 
     <span ng-show="principalManagementForm.code.$invalid">Code not over 3</span> 
 
     
 
     <br> 
 
     <br> 
 
     <button ng-click="clear()">Clear</button> 
 

 
     {{ input }} 
 
    </form> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2016-03-22 09:00:58

完璧な答え！そのような属性やオプションがあるとは決して考えなかった。これはまさに私が必要なものです！ –

AngularJSでクリアボタンで値を削除する

答えて

関連する問題