Get all the values of form having same name in angularjs

Question

I have a from which contains two text boxes one for getting name and other for email and there a button to add new row which add these two textboxes I'm trying to get all the values of Name and Email through AngularJS but I am new to Angular

Here is my code:

JS CODE

function addrow() {
    var table = document.getElementById("emp");
    var row = table.insertRow(2);
    var name = row.insertCell(0);
    var email = row.insertCell(1);
    name.innerHTML = "<input id='Name' type='text' value='' name='ename' ng-model='data.ename'>";
    email.innerHTML = "<input type='text' value='' name='Email' id='email' ng-model='data.email'>";
}

HTML

    <form name="employees" ng-submit="emp()">
    <table id="emp">
        <tr>
            <td>Employee Name
            </td>
            <td>Employee Email
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" id="Name" name="ename" ng-model="data.ename" />
            </td>
            <td>
                <input type="email" id="email" name="email" ng-model="data.email" />
            </td>
        </tr>
    </table>
<button class="btn btn-primary" onclick="addrow();">Add new</button>
        <input type="submit" class="btn" />
    </form>

AngularJS CODE

var model1Controller = ["$scope", "$http", function ($scope, $http) {
$scope.data = [];

$scope.emp = function () {
    alert($scope.data.ename);
    }
}]

squid314 · Accepted Answer · 2014-02-14 22:44:45Z

1

If you don't need all entries to be editable, you can use @Brian's solution. If you want all of them editable just use ng-repeat to wrap the inputs:

<form name="employees" ng-submit="emp()">
    <table id="emp">
        <tr>
            <td>Employee Name</td>
            <td>Employee Email</td>
        </tr>
        <tr ng-repeat="emp in employees">
            <td><input ng-model="emp.ename" /></td>
            <td><input type="email" ng-model="emp.email" /></td>
        </tr>
    </table>
    <button class="btn btn-primary" ng-click="addrow()">Add new</button>
    <input type="submit" class="btn" />
</form>

var model1Controller = ["$scope", "$http", function ($scope, $http) {
    var employees = $scope.employees = [];
    $scope.addrow = function() { employees.push({ /* don't need anything here */ }); };
    $scope.emp = function () {
        console.log(employees);
    }
};

edited Feb 14, 2014 at 22:44

answered Feb 14, 2014 at 6:29

squid314

1,3958 silver badges9 bronze badges

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

2 Comments

squid314 Over a year ago

That was literally my point, @BrianVanderbusch. In your example, you can edit the "next employee", but once it has been added to the list, it is fixed, uneditable. In my example (which by the way does work completely, after fixing 1 typo: jsfiddle.net/WRY9v/1), each row of the table has <input>s such that ALL of the entries in the employees list can be edited at ANY time. Both options are valid but represent a different user experience. Regarding my addrow function, it does add a blank object for the next employee to the employees list which is already on the scope.

Mohsin Over a year ago

Actually this is what i want :)

Brian Vanderbusch · Accepted Answer · 2014-02-14 06:03:42Z

Scrap your addrow() function file, move it into your controller, and use ng-repeat filter instead. ngRepeatDocs . The whole purpose of Angular in this situation, is to do the element and DOM binding for you, so you don't have to write a function to scrape values and insert html. That said, I don't know if your submit is intended to add a person to the form, or if the submit is supposed to submit all of your form data, and you have another button (you mentioned a button, but I don't see one in your code) to add employees to the form. Until you can clear that up a bit, here's a guideline for how to show every employee in your data model, and add them to the form using the submit action:

<form name="employees" ng-submit="addrow()" ng-controller="model1Ctrl">
<table id="emp">
    <tr ng-repeat="emp in data">
        <td> {{ emp.ename }}
        </td>
        <td>{{ emp.email }}
        </td>
    </tr>
    <tr >
        <td>
            <input type="text" id="Name" name="ename" ng-model="ename" />
        </td>
        <td>
            <input type="email" id="email" name="email" ng-model="email" />
        </td>
    </tr>
</table>

Your Controller:

var model1Ctrl = ['$http','$scope',function($http,$scope){

    $scope.data = [];

    $scope.addrow = function () {
       var newEmp = {
             ename: $scope.ename,
             email: $scope.email
           }

      $scope.data.push(newEmp); //adds the new employee as an object into your data set
      // which ng-repeat will automatically know about, and display in your table

       //clear the scope of your inputs so they can be used again
       $scope.ename = '';
       $scope.email = '';

    }
}]

Collectives™ on Stack Overflow

Get all the values of form having same name in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related