Проблема с ng-model и ng-repeat, входное значение дублируется в каждом поле формы на странице

У меня есть страница, на которой создается несколько форм на основе ng-repeat. все работает нормально, пока не напишите что-нибудь во ввод, и все будет дублироваться во всех других элементах ввода повторяющихся форм. Я использовал ng-model="Notify.message", который представляет собой не что иное, как объект, который принимает значение из ввода и отправляет элементу управления при отправке кнопки и, следовательно, остальной логике.

Я ищу, когда, если одна форма заполнена, другие формы должны оставаться спокойными и не должны дублировать значения, записанные во входном тексте формы 1.

Вот код:

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

angularjs angularjs-directive angularjs-ng-repeat angular-ngmodel ng-bind
person AngryJS    schedule 10.05.2014    source источник
comment
Поскольку вы привязываете все входные данные ng-model к Notify.message, если кто-либо обновит его, другая форма получит его из-за привязки данных? У вас должна быть отдельная модель для каждого повторного ввода, чтобы он работал независимо.   -  person Chandermani    schedule 10.05.2014
comment
@Changermani - Как у меня может быть отдельная модель? есть ли способ повторно инициализировать его для каждой новой формы?   -  person AngryJS    schedule 10.05.2014
comment
Это зависит от сценария. Если вы используете ng-model=message. Каждая область повтора будет содержать свое собственное свойство сообщения, к которому вы можете получить доступ в пределах повторения. В противном случае вам нужно построить модель таким образом (как это было предложено @aamir), где вы можете привязать разные модели к разным формам.   -  person Chandermani    schedule 10.05.2014
comment
@Chandermani - Извините, я новичок в этом, так что не могли бы вы помочь, обновив эту скрипту - jsfiddle.net /CMnxW/1   -  person AngryJS    schedule 11.05.2014
comment
Что-то вроде этого вы хотите jsfiddle.net/4K8e7   -  person Chandermani    schedule 11.05.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я попытаюсь реализовать следующее решение.

создайте вложенный объект json с количеством форм для отображения в контроллере angularjs.

Например

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

}

очевидно, вы можете использовать цикл для его создания или любой другой подход, который лучше всего подходит вам в вашем контексте, для создания коллекции форм в контроллере angularjs.

затем на html-странице вы можете использовать следующее соглашение для правильного заполнения данных каждой формы

вам нужно два ng-repeat, сначала для индекса каждой формы, а затем для итерации вложенного объекта формы.

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

в результате у вас будет $scope.FormsCollection с правильными данными объекта формы

Пожалуйста, проверьте пример кода в следующем jsfiddle

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

jsfiddle должен содержать следующий код.

<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: '[email protected]'}, {userEmail: '[email protected]'}];

    $scope.notify = function(post) {
        $scope.Notify.destEmail = post.userEmail;
        //set other $scope.Notify properties from post
        //your other notify code...
    }
}
person aamir sajjad    schedule 10.05.2014
comment
не могли бы вы помочь со скрипкой? - person AngryJS; 10.05.2014
comment
@AngryJS, вы хотите отображать соответствующие электронные письма по нажатию кнопки. например, если сначала нажать кнопку уведомления, которую вы хотите распечатать ([email protected]), а при нажатии второй кнопки нажать кнопку печати ([email protected]). Пожалуйста, подтвердите или поправьте меня, если я неправильно понял. - person aamir sajjad; 11.05.2014
comment
на самом деле мое требование состоит в том, чтобы отправить поле электронной почты в форме отправки на контроллер, который будет сопоставлен с переменной Notify.message {java class VO}. Таким образом, при каждом нажатии кнопки значение, введенное в электронном письме, отправляется и, таким образом, вводится в БД. - person AngryJS; 11.05.2014
comment
@AngryJS Я обновил свой ответ, пожалуйста, проверьте пример обновления jsfiddle. - person aamir sajjad; 11.05.2014
comment
@AngryJS это своего рода стиль программирования. Я вообще не буду использовать Notify.destEmail. Я просто буду использовать post.Email в функции уведомления. или я могу использовать цикл angularjs после того, как пользователь введет требуемый адрес электронной почты для публикации каждого электронного письма, и я пройдусь по сообщениям, или я могу отправить всю коллекцию (сообщений) на сервер и обработать запрос в цикле. так что это вопрос выбора, учитывая контекст проблемы - person aamir sajjad; 11.05.2014