Angularjs clear input text field

Question

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.

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

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

then you need to make a for loop and clear value field of each element. — Pankaj Parkar
– Pankaj Parkar, Commented Jun 22, 2015 at 13:37
yes, i think is the best way, but i don't know which kind of code use to clear all input using angularjs — Atlas91
– Atlas91, Commented Jun 22, 2015 at 13:39
look at mine answer which would be great approach using angular.copy — Pankaj Parkar
– Pankaj Parkar, Commented Jun 22, 2015 at 13:41

Michael · Accepted Answer · 2015-06-22 14:03:25Z

5

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.

$scope.model = {};

That's it - not need to reset every single field!

answered Jun 22, 2015 at 14:03

Michael

3,1141 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2015-06-22 13:43:26Z

0

Try to reinitialize the input fields:-> 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();

answered Jun 22, 2015 at 13:43

David

82510 silver badges33 bronze badges

Comments

morpheus05 · Accepted Answer · 2015-06-22 14:15:17Z

0

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.

edited Jun 22, 2015 at 14:15

answered Jun 22, 2015 at 13:44

morpheus05

4,8822 gold badges37 silver badges48 bronze badges

Collectives™ on Stack Overflow

Angularjs clear input text field

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related