Javascript Angularjs 清除输入文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30981284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs clear input text field
提问by End.Game
I have this situation:
我有这种情况：
With some input text. When i fill the input i can hide them by a button. What i need is that when the input hides all content inside that was typed clear. So when i click "Show" button the input must be empty. I can't using ngIf before someone ask me.
带有一些输入文本。当我填写输入时，我可以通过一个按钮隐藏它们。我需要的是，当输入隐藏所有内容时，输入清晰。因此，当我单击“显示”按钮时，输入必须为空。在有人问我之前，我不能使用 ngIf。
This is the code:
这是代码：
<div ng-controller="myCtrl">
<button ng-click="hideStuff()">Hide!</button>
<button ng-click="showStuff()">Show!</button>
<div ng-repeat="item in inputFileds">
<input placeholder="{{item.label}}" class="default" ng-hide="hidden" ng-class="{'fade': startFade, 'show': !startFade}" type="text" ng-model="item.value" />
</div>
</div>
And javascritp
和 javascript
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", function($scope, $timeout) {
$scope.hideStuff = function() {
$scope.startFade = true;
$timeout(function() {
$scope.hidden = true;
}, 700);
};
$scope.showStuff = function() {
$scope.startFade = false;
$timeout(function() {
$scope.hidden = false;
}, 700);
};
$scope.inputFileds = [{
"label": "input1",
"value": ""
}, {
"label": "input2",
"value": ""
}, {
"label": "input3",
"value": ""
}, {
"label": "input4",
"value": ""
}];
});
回答by Michael
You can avoid such problems with the right design!
您可以通过正确的设计避免此类问题！
Why do you put configuration data(labels) into the model? Separate them into 2 object, because the labels are static, but the input field values are not. You can then just reset the modal very simple.
为什么要将配置数据（标签）放入模型中？将它们分成 2 个对象，因为标签是静态的，但输入字段值不是。然后您可以非常简单地重置模态。
$scope.model = {};
That's it - not need to reset every single field!
就是这样 - 不需要重置每个字段！
回答by David
Try to reinitialize the input fields:-> http://jsfiddle.net/maralik/f8erG/56/
尝试重新初始化输入字段：-> http://jsfiddle.net/maralik/f8erG/56/
$scope.showStuff = function () {
$scope.initInputFields();
$scope.startFade = false;
$timeout(function(){
$scope.hidden = false;
}, 700);
};
$scope.initInputFields = function() {
$scope.inputFileds = [{
"label": "input1",
"value": ""
},{
"label": "input2",
"value": ""
},{
"label": "input3",
"value": ""
},{
"label": "input4",
"value": ""
}];
};
$scope.initInputFields();
回答by morpheus05
I added
我加了
for(var i = 0; i < $scope.inputFileds.length; ++i) {
$scope.inputFileds[i].value = "";
}
in your hide function.
在你的隐藏功能中。
Its important to understand, that angular uses double binding in this case. That means, if you update your model inside the controller, it will be reflected back. Thats why you can change the model object and the form will show an empty input field.
理解这一点很重要，在这种情况下，angular 使用双重绑定。这意味着，如果您在控制器内更新模型，它将被反射回来。这就是为什么您可以更改模型对象并且表单将显示一个空的输入字段。
