CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
forgottofly
forgottofly

Reputation: 2719

Avoiding duplicate index in columns in table when using ng-repeat

Below is my plunker in which I'm tring to display the output types based on different months.I want to save the maximum capacity for each month on click of save button by getting all the values in an array.But when I type in a text box the value gets repeated as the index is repeated column wise.

ng-repeat in table

Below is the code:

JavaScript:

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';

    $scope.outputType=["Coal","ROM","WASTE"];
    $scope.months=["JAN","FEB","MARCH","APRIL"];
    $scope.values = [];
    $scope.save=function(){
        alert($scope.values)
    }
});

HTML:

  <table style="border:1px solid red;">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th ng-repeat="i in months"><b>{{i}}</b></th>
        </tr>
    </thead>
    <tbody ng-repeat="item in outputType">
        <tr>
            <td>{{item}} </td>
            <td ng-repeat="i in months">
                <input type="text" ng-model="values[$index]"
                       placeholder="Max.Capacity">

            </td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Views: 103

Answers (2)

Niezborala
Niezborala

Reputation: 1857

Solution if you want to leave an array.

You need to change your ngModel in input

<input type="text" ng-model="values[$index]" placeholder="Max.Capacity">

to

ng-model="values[$parent.$index][$index]".

Here is an example:

Example

Upvotes: 1

Dmitri Algazin
Dmitri Algazin

Reputation: 3456

Check that http://plnkr.co/edit/4DUDIBoTOCI4J89FiQeM?p=preview

JS

$scope.values = {};

HTML

<input type="text" ng-model="values[item][i]"  placeholder="Max.Capacity">

or

<input type="text" ng-model="values[i][item]"  placeholder="Max.Capacity">

Upvotes: 2

Related Questions