How to retrieve text from several input fields with same ng-model in Angular

Question

I have a page that displays an input field after the user clicks a button. If the user clicks the same button several times, the application will spawn the same input field several times. Likewise, there is a button to remove the last input field that was added.

After the user has spawned and filled out as many input fields as they want, I want the user to be able to click a button whose action will then be to gather all the information from the input fields, and do a console.log() of all that information. How would I go about doing this in Angular.js?

Here is the way I am currently doing the part where I add/remove input fields, and my attempt at gathering the data from the view.

<div ng-app="" ng-controller="myController">
    <button ng-click="add()">Click Me to Add!</button>
    <button ng-click="rem()">Click Me to Remove!</button>
    <div ng-repeat="x in obj">
        <label>Input 1</label><input type="text" ng-model="thing">
    </div>
    <button ng-click="display()">display</button>
</div>
<script>
function myController($scope){
    $scope.obj = [];
    $scope.count = 0;
    $scope.add = function(){
        $scope.count = $scope.count + 1;
        $scope.obj.push({lett: $scope.count});
    };
    $scope.rem = function(){
        $scope.count = $scope.count - 1;
        $scope.obj.pop();
    };
    $scope.display = function(){
        console.log($scope.thing);
    };
}
</script>

The part where I do ng-model="thing" is my attempt to bind the data from the view, to the application. $scope.display is the function that is supposed to do the displaying.

Thanks in advance for your responses!

Ry- · Accepted Answer · 2017-01-06 00:36:20Z

1

I rewrote some of your code to make it work:

    <div ng-app="" ng-controller="myController">
        <button ng-click="add()">Click Me to Add!</button>
        <button ng-click="rem()">Click Me to Remove!</button>
        <div ng-repeat="input in inputs track by $index">
            <label>Input {{ $index }}</label>
            <input type="text" ng-model="input.value" />
        </div>
        <button ng-click="display()">display</button>
    </div>
    <script>
    function myController($scope){
        $scope.inputs = [];
        $scope.add = function(){
            $scope.inputs.push({'value':''});
        };
        $scope.rem = function(){
            $scope.inputs.pop();
        };
        $scope.display = function(){
            console.log($scope.inputs);
        };
    }
    </script>

You can see the fiddle here: http://jsfiddle.net/K38GC/

To get the display the way you want it you can edit the $scope.display function to fit whatever you'd like. Let me know if you have any questions.

edited Jan 6, 2017 at 0:36

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Jul 14, 2014 at 2:58

renlo

212 silver badges6 bronze badges

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

2 Comments

viiq Over a year ago

You are a smart person. Thank you!

viiq Over a year ago

Actually, I have another question - If I want to do a nested "Add" button within the ng-repeat that already exists.. how would I do that? I am struggling a lot with Angular.js for some reason. I am also having trouble understanding why it will only let me add one 'nested' input field. Here is the jsfiddle of what I am trying to do. jsfiddle.net/viiqswim/MdM7C Thank you!

Collectives™ on Stack Overflow

How to retrieve text from several input fields with same ng-model in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related