Angularjs清除输入文本字段答案

【问题标题】：Angularjs clear input text fieldAngularjs清除输入文本字段
【发布时间】：2015-06-22 13:31:51
【问题描述】：

我有这种情况：

带有一些输入文本。当我填写输入时，我可以通过一个按钮隐藏它们。我需要的是，当输入隐藏所有输入内容时清晰。因此，当我单击“显示”按钮时，输入必须为空。在有人问我之前，我无法使用 ngIf。

这是代码：

<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>

还有 javascritp

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": ""
    }];
});

【问题讨论】：

那么你需要做一个for循环并清除每个元素的值字段。
是的，我认为是最好的方法，但我不知道使用哪种代码来清除所有使用 angularjs 的输入
看看我的答案，这将是使用angular.copy的好方法

标签： javascript jquery html angularjs input

【解决方案1】：

您可以通过正确的设计避免此类问题！

为什么要将配置数据（标签）放入模型中？将它们分成 2 个对象，因为标签是静态的，但输入字段值不是。然后，您可以非常简单地重置模态。

$scope.model = {};

就是这样 - 不需要重置每个字段！

【讨论】：

【解决方案2】：

尝试重新初始化输入字段：-> 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();

【讨论】：

【解决方案3】：

我加了

for(var i = 0; i < $scope.inputFileds.length; ++i) {
        $scope.inputFileds[i].value = "";
    }

在你的隐藏功能中。

理解这一点很重要，在这种情况下，angular 使用双重绑定。这意味着，如果您在控制器中更新模型，它将被反射回来。这就是为什么您可以更改模型对象并且表单将显示一个空的输入字段。

【讨论】：