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>

Answer 1

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...
    }
}