How to view the dynamically added fields in Angular.JS?

Question

Please check this: http://plnkr.co/edit/61JgnU?p=preview

If you start filling the fields you will see the fields been printed. Which is fine. Now if you press the Add Input then bunch of fields will be added.

I need to add the newly added fields value to be printed under the main fields. (Please let me know if you need more explanation.)

Here is how I need it to be for the newly added fields:

I don't know how to show the fields without needing to make another $scope.fields array.

One more thing, in the $socpe.fields array there are more than 20 different fields, I just put what it needed for this question.

Thanks.

Answer 1

My recommendation would be to loop through your inputs array with the same markup you used for the users. The following seems to work if I understand what you're looking for.

    <div ng-repeat="input in inputs">
    <table class="table table-bordered">
        <tr ng-repeat="field in fields | orderBy: 'index'" ng-show="input[field.id]">
            <td class="col-md-4"><b>{{field.name}}</b>
            </td>
            <td class="col-md-7">{{input[field.id]}}</td>
        </tr>
    </table>
    </div>

Another option you might want to consider is a custom directive taking the fields array and the display array as parameters.