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。您现在正在进行绑定的方式是每次迭代都绑定到同一个对象。

/misc/stats/index.html

每个AngularJS动态多种形式和处理ng模型

1 个答案: