AngularJS - Unable to empty input field

Question

I'm having some problems with emptying my input fields after they have been added with ng-repeat.

My controller looks like this:

var SimpleController = function ($scope) {
    $scope.rows = [{id: 'row1' }, {id: 'row2'}, {id: 'row3'}, {id: 'row4'}];

    $scope.addText = function () {
        $scope.modelRow = "text";   
    }
    $scope.removeText = function () {
        $scope.modelRow = " ";   
    }
}

I'm using ng-repeat on the rows array to add the amount of input fields i need. For example I have function that extends the array if the user need more fields.

Then i have a function to empty the inputs and one to fill them, which works like intended. However, if you type something in the input fields yourself, then neither of the functions won't work on that input.

My HTML:

<div ng-repeat="row in rows" >
    <input ng-model="modelRow" type="text" name="text" />
</div>

<button ng-click="addText()">Add text</button>
<button ng-click="removeText()">Remove Text</button>

I'm pretty new to Angular, so i'm probably missing something. Hopefully someone can help me out.

Also made a jsfiddle to demonstrate my problem, which can be found here: jsfiddle (Try typing something and you will see that the functions doesn't work).

You have more than one modelRow, and that is a problem.

S.Greczyn
– S.Greczyn

2015-10-29 11:18:05 +00:00
Commented Oct 29, 2015 at 11:18 — S.Greczyn
– S.Greczyn, Commented Oct 29, 2015 at 11:18
I see. Is there any good solution to make this work?

qua1ity
– qua1ity

2015-10-29 11:23:22 +00:00
Commented Oct 29, 2015 at 11:23 — qua1ity
– qua1ity, Commented Oct 29, 2015 at 11:23

Wes Foster · Accepted Answer · 2015-10-29 13:18:29Z

3

Just elaborating the previous answer. Here is the controller you can have.

var SimpleController = function ($scope) {
    $scope.rows = [{id: 'row1', value: ''}, {id: 'row2', value: ''}, {id: 'row3', value: ''}, {id: 'row4', value: ''}];

    $scope.addText = function () {
        for (var i in $scope.rows) {
            $scope.rows[i].value = "text";
        }
    };
    $scope.removeText = function () {
         for (var i in $scope.rows) {
            $scope.rows[i].value = "";
        }
    }
};

Each row model should have a property to store the user's entered text. The functions addText() and removeText() should iterate overs the rows model and modify the value property.

<div ng-repeat="row in rows">
    <input ng-model="row.value" type="text" name="text"/>
</div>

<button ng-click="addText()">Add text</button>
<button ng-click="removeText()">Remove Text</button>

edited Oct 29, 2015 at 13:18

Wes Foster

8,9005 gold badges45 silver badges64 bronze badges

answered Oct 29, 2015 at 12:04

Ganesh Kumar

3,2501 gold badge21 silver badges27 bronze badges

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

1 Comment

qua1ity Over a year ago

That seems to do it. Thanks alot!

Arun Ravindranath · Accepted Answer · 2015-10-29 12:42:15Z

2

HTML

<div ng-repeat="row in rows" >
        <input ng-model="model.modelRow" type="text" name="text" />

    </div>

<button ng-click="addText()">Add text</button>
<button ng-click="removeText()">Remove Text</button>

controller

$scope.rows = [{id: 'row1' }, {id: 'row2'}, {id: 'row3'}, {id: 'row4'}];
    $scope.model={};
    $scope.model.modelRow='';
    $scope.addText = function () {
        $scope.model.modelRow = "text";   
    }
    $scope.removeText = function () {
        $scope.model.modelRow = " ";   
    }

changing code like this will solve your problem

Edit

in the above code if you type in one text field all text field will be filled with same content

if you use single model it is supposed to work like that

what i would suggest is to change the ng-model="row.value"

HTML

    <div ng-repeat="row in rows" >
        <input ng-model="row.value" type="text" name="text" />
    </div>

    <button ng-click="addText()">Add text</button>
    <button ng-click="removeText()">Remove Text</button>
    <!-- <pre>{{rows}}</pre> -->

Controller

$scope.rows = [{id: 'row1' }, {id: 'row2'}, {id: 'row3'}, {id: 'row4'}];

    $scope.addText = function () {
        for(var index in $scope.rows){
        $scope.rows[index].value="text";  
        }

    }
    $scope.removeText = function () {
         for(var index in $scope.rows){
         delete $scope.rows[index].value;  
        }
    }

edited Oct 29, 2015 at 12:42

answered Oct 29, 2015 at 11:38

Arun Ravindranath

2,2691 gold badge14 silver badges14 bronze badges

2 Comments

qua1ity Over a year ago

Yeah, my intention with this is not to have the text fields filled with the same content. They should be individual

Arun Ravindranath Over a year ago

check the code in edit section , i think this will fulfill your requirement

Collectives™ on Stack Overflow

AngularJS - Unable to empty input field

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related