Issue with ng-model and ng-repeat, input value is duplicated on each form field on the page

Question

I have a page where multiple forms are created based on ng-repeat. everything works fine until write something into the input and everything gets duplicated on all the other repeated forms input elements. I have used ng-model="Notify.message" which is nothing but object which takes the value from the input and sends to control on button submit and hence rest of the logic.

I am looking for when if one form is been filled, other forms should keep quite and shouldnt duplicate the values written in input text of form 1.

Here is the code:

    <div data-ng-show="alluserposts.length > 0">

        <div id="b{{userpost.id}}" data-ng-repeat="userpost in alluserposts" >
                <div class="row" style="margin-left: -5px">
                    <form class="text-center" role="form" id=f1{{userpost.id}} name="userForm"
                          ng-submit="notify(userForm.$valid, userpost, apiMe)" novalidate>
                        <div class="row">
                            <div class="col-xs-8 col-md-4">
                                <div class="form-group">
                                    <input data-container="body" data-toggle="popover" data-placement="top"
                                           data-content="Any message which you would like to convey to post owner"
                                           type="text" ng-model="Notify.message" data-ng-init="Notify.message=''"
                                           id="u{{userpost.id}}"
                                           placeholder="Enter a Message or Phone number" class="form-control"
                                           required>

                                    <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">It is
                                        required.</p>
                                    <script>$(function () {
                                        $("[data-toggle='popover']").popover();
                                    });
                                    </script>

                                    <input type="hidden" ng-model="Notify.loggedInEmail"
                                           ng-init="Notify.loggedInEmail = result.email"/>
                                    <input type="hidden" ng-model="Notify.postId" ng-init="Notify.postId = userpost.id"/>
                                    <input type="hidden" ng-model="Notify.destEmail"
                                           ng-init="Notify.destEmail = userpost.userEmail"/>
                                </div>
                            </div>

                            <div ng-show="loginStatus.status == 'connected'" class="col-xs-4 col-md-2">
                                <button class="btn btn-primary" ng-disabled="userForm.$invalid || !userForm.$dirty"
                                        type="submit">
                                    Notify Post Owner
                                </button>
                            </div>
                        </div>
                    </form>
                    </p>
                </div>
            </div>
        </div>
    </div>

Since you are binding all input `ng-model` to `Notify.message`, if any one updates it the other form would get it due to data binding? You should have separate model for each repeat input to make it work independently — Chandermani, May 10 '14 at 11:59
@Chandermani - How can I have separate model? is there a way to reinitialize it for every new form? — AngryJS, May 10 '14 at 12:11
That depends upon scenario. If you use `ng-model=message`. Each repeat scope would contain its own message property which you can access within the repeat. Else you need to build a model in a way (like suggested by @aamir) where you can bind different model to different forms. — Chandermani, May 10 '14 at 12:46
@Chandermani - Sorry I am totally new to it, so can u pls helping this by updating this fiddle - http://jsfiddle.net/CMnxW/1/ — AngryJS, May 11 '14 at 06:46

aamir sajjad · Accepted Answer · 2014-05-11T07:00:44.160

I will attempt following solution to implement it.

create a nested json object with number of forms to display in angularjs controller.

for example

$scope.FormsCollection = {
         "Form1" : [
             {"title" : "Rockband", "details" : "1hr"},
         ],
         "Form2" : [
             {"title" : "The Old You", "details" : "Dr. Smith"}
         ]

}

obviously, you can use loop to build it or whatever approach suits you best in your context to build the forms collection in angularjs controller.

then in html page you can use following convention to correctly populate each form data

you need two ng-repeat, first for index of each form, and then to iterate nested form object.

<input type="text" ng-model="form[index].firstName"/>

as result you will have $scope.FormsCollection with correct form object data

Please check the example code in following jsfiddle

http://jsfiddle.net/CMnxW/4/

jsfiddle should contain following code.

<div ng-app>
    <div ng-controller="controller">
        <ul ng-repeat="post in posts">
            <li>{{$index}}
                <input type="text" ng-model="post.userEmail"  />
                <button class="btn btn-danger" ng-click="notify(post)" type="button">Notify</button>
            </li>
        </ul>

        <table>
            <tr>
                <td>destEmail is: </td>
                <td>{{Notify.destEmail}}</td>
            </tr>
        </table>
    </div>
</div>

JS:

function controller($scope) {
    $scope.Notify = {
        destEmail: ''
    };

    $scope.posts = [{userEmail: 'e@mail.com'}, {userEmail: 'f@mail.com'}];

    $scope.notify = function(post) {
        $scope.Notify.destEmail = post.userEmail;
        //set other $scope.Notify properties from post
        //your other notify code...
    }
}

@AngryJS you want to display respective emails with respect to button click. like if first notify button click you want to print(e@mail.com) and on second button click print (f@email.com). Please confirm or correct me if I misunderstood. — aamir sajjad, May 11 '14 at 06:56
actually my requirement is to send the email field on form submit to controller which will be mapped to Notify.message variable {java class VO}. So its like on each button click, value entered in the email is sent and thus entered into DB — AngryJS, May 11 '14 at 06:59
@AngryJS I updated my answer, please verify the update jsfiddle example. — aamir sajjad, May 11 '14 at 07:01
@AngryJS it is kind of programming style. I will not even use Notify.destEmail at all. I will simply use post.Email in notify function. or I can use angularjs loop after user enter the required email to post each email, and I will loop through the posts or I can send the entire (posts) collection to server, and process the request in loop. so it is matter of choice considering the problem context — aamir sajjad, May 11 '14 at 07:19

Issue with ng-model and ng-repeat, input value is duplicated on each form field on the page

1 Answers1