我有一个页面,您可以在其中动态添加表单,但我想要做的是将其中每个表单作为不同的对象。现在,当我添加新表单并填写输入字段时,它也反射(reflect)在其他表单中,但我希望应用程序将每个表单视为单独的实体。我怎样才能实现这一目标?我的代码如下:
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!")
})
};
}
如有任何帮助,我们将不胜感激。谢谢!!
最佳答案
您想要使用在 ng-repeat 中创建的引用变量来设置 ng-model。现在进行绑定(bind)的方式是为每次迭代绑定(bind)到同一个对象。
<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>
关于javascript - 动态多种形式并处理每个 AngularJS 的 ng-model,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45617624/