动态多种形式和处理每个 AngularJS 的 ng-model

Question

我有一个页面，您可以在其中动态添加表单，但我想做的是将它们中的每一个都作为不同的对象。现在，当我添加一个新表单并填写输入字段时，它也反映在其他表单中，但我希望应用程序将每个表单视为一个单独的实体。我将如何实现这一目标？我的代码如下：

HTML

<form name="referenceForm" ng-controller="ReferenceController as rfcCtrl" novalidate>
          <md-card ng-repeat="reference in rfcCtrl.references track by $index" class="job-profile-card flex" ng-click="jobCtrl.browseMatches(job)">
               <md-button ng-disabled="rfCtrl.references.length==0" ng-click="rfcCtrl.add(reference)" class="md-fab md-fab-bottom-right docs-scroll-fab job-profile-fab" aria-label="FAB">
                 <md-icon ng-bind="'add'"></md-icon>
               </md-button>
                 <div layout="column" layout-align="space-around center">
                    <div class="flex">
                    <md-input-container class="md-block" flex-gt-sm>
                        <label style="color:white">Name</label>
                        <input ng-model="rfcCtrl.ref.name" style="color:white" md-maxlength="30" ng-required="true">
                        <div style="color:white" class="hint" ng-if="showHints">Tell us what we should call you!</div>
                        <div style="color:white"  ng-if="!showHints">
                        <div style="color:white" ng-message="required">Name is required.</div>
                        </div>
                    </md-input-container>

                    <md-input-container class="md-block" flex-gt-sm>
                    <label style="color:white">Phone Number</label>
                    <input name="phone" ng-model="rfcCtrl.ref.phone" ng-required="true">
                    <div style="color:white" class="hint" ng-show="showHints">(###) ###-####</div>
                    <div style="color:white" ng-messages="referenceForm.phone.$error" ng-hide="showHints">
                    <div style="color:white" ng-message="pattern">(###) ###-#### - Please enter a valid phone number.</div>
                    </div>
                    </md-input-container>
                    </div>
                </div>
          </md-card>
                <section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
                 <md-button ng-disabled="referenceForm.$invalid" ng-click="rfcCtrl.submit()" class="submit" type="submit" layout="row" layout-sm="row" layout-align="center center" layout-wrap text-align="center">Submit</md-button>
                </section>
      </form>

Javascript

function ReferenceController(referenceService, $scope, $location,$cookies) {
    var reference;
    let vm = this;
    vm.references = [reference];


     vm.ref = {
        'name': "",
        'phone': ""
    };



     vm.add=function(reference){
        vm.references.push({reference});
       }


    vm.submit = function () {

        referenceService.postReferences(vm.ref).then(function (data) {
                $location.path("/userType")
            },
            function () {
                alert("There is an error processing your request!")
            })
    };

}

如有任何帮助，我们将不胜感激。谢谢！！

Answer 1

您想使用您在 ng-repeat 中创建的引用变量来设置 ng-model。您现在进行绑定的方式是为每次迭代绑定到相同的对象。

<md-input-container >
    <label style="color:white">Name</label>
    <input ng-model="reference.name" style="color:white" md-maxlength="30" ng-required="true">
</md-input-container>

动态多种形式和处理每个 AngularJS 的 ng-model

Dynamic multiple forms and handling ng-model for each AngularJS

javascript

angularjs

forms

angular-forms