2016-03-22 13 views
0

ile temiz bir düğmeyle değerlerin kaldırılması Bütün bir girdi kümesini temizleyebilirim ama şey, yalnızca değeri geçerli olduğunda silinir. Olmadığı zaman artık silinmez.AngularJS

Bir şey eklenmeli ve her bir döngü kullanılarak el ile yapılabiliyor. Ancak bu çözümü ve daha az kod gibi bir şeyden kaçınmaya çalışıyorum, bu yüzden birileri zaten bir çözüm bulmuş olabilir. Benim şu anki kodudur:

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>

+0

geçersiz değerine göre ne anlama geliyor? Kodun benim için iyi çalışıyor gibi görünüyor. –

+0

Hangi tarayıcı kullanıyorsunuz? –

+1

Özür, ama yanlış kodu ekledim. Yeni bir kodum var –

cevap

2

Sadece allowInvalid bayrağıyla ng-model-options kullanın:

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>

+1

Mükemmel Cevap! Böyle bir özellik ya da seçenek olduğunu düşünmemiştim. Bu tam ihtiyacım olan şey! –