ng-model 不会更新更改后的表单内容 [英] ng-model won't update the changed form content

问题描述

我有一个表单，其中有一个删除条目按钮和一个添加条目按钮.我想将更新的表单字段数据输出到formData={}，以便提交的数据是最新的.但是，当字段集被删除时，formData={} 不会更新为最新的数据条目信息，并且旧的表单数据仍然存在于 formData={} 中.这是我的代码链接

解决方案

试试这个.

var app = angular.module("app",[]);app.controller("MyCtrl" , function(){var formCtrl = this;formCtrl.forms ={表单数据:[{名称:""}]};formCtrl.addFields = function(){var name = {name:""};formCtrl.forms.formData.splice(formCtrl.forms.formData.length,0,name);};formCtrl.rmFields = 函数(表单){var index = formCtrl.forms.formData.indexOf(form);formCtrl.forms.formData.splice(index,1);}});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app="app" ng-controller="MyCtrl as formCtrl"><表格><tr ng-repeat="formCtrl.forms.formData 中的表单"><td><input type="text" ng-model="form.name"></td><td><input type="button" ng-click="formCtrl.addFields()" value="添加" ng-show="$last"></td><td><input type="button" ng-click="formCtrl.rmFields(form)" value="Delete" ng-show="$index != 0"></td></tr><跨度><pre>{{formCtrl.forms |json }}</pre></span>

I have a form which has a delete entry button and an add entry button. I want to output the updated form field data to formData={}, so that the submitted data will be up-to-date. However, when a fieldset is deleted, formData={} is not updated with the newest data entry information and the old form data still exist in formData={}. Here's the link for my code

解决方案

try like this.

var app = angular.module("app",[]);

app.controller("MyCtrl" , function(){
  var formCtrl = this;
   formCtrl.forms ={
       formData:[{ name:""}]
   };
  
  formCtrl.addFields = function(){
    var name = {name:""};
     formCtrl.forms.formData.splice(formCtrl.forms.formData.length,0,name);
        
    };
  
  formCtrl.rmFields = function(form){
    var index  = formCtrl.forms.formData.indexOf(form);
       formCtrl.forms.formData.splice(index,1);
    }
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl as formCtrl">
   <table>
     <tr ng-repeat="form in formCtrl.forms.formData">
        <td> <input type="text" ng-model="form.name"></td>
        <td> <input type="button" ng-click="formCtrl.addFields()" value="Add" ng-show="$last"></td>
        <td> <input type="button" ng-click="formCtrl.rmFields(form)" value="Delete" ng-show="$index != 0"></td>
     </tr>
   </table> 
    <span>  <pre>{{formCtrl.forms | json }}</pre></span>
</div>

这篇关于ng-model 不会更新更改后的表单内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！