Проблем с 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
@Chandermani - Как мога да имам отделен модел? има ли начин да го инициализирате отново за всяка нова форма?   -  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-повторения, първо за индекс на всеки формуляр и след това за повторение на вложен обект на формуляр.

<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}. Така че при всяко натискане на бутон стойността, въведена в имейла, се изпраща и по този начин се въвежда в DB - 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