如何清除动态 ng-repeat 表单字段答案

【问题标题】：How to clear dynamic ng-repeat form fields如何清除动态 ng-repeat 表单字段
【发布时间】：2015-04-15 19:05:48
【问题描述】：

问题：如何清除动态创建的ng-repeatAngularJS 表单域？如果你能找到一个我没有找到答案的地方，我会感到惊讶。

背景：我让 AngularJS 通过服务将 JSON 拉入我的控制器。然后，我使用范围对表单进行 ng-repeat 标签。我在清理字段时遇到问题。由于文字不能准确地告诉你我在这里做什么是基本的代码设置。我把它写成了几行。

我尝试过旧的$scope.formName.inputName=""; 和$scope.inputName="";，但它们不起作用。有什么想法或方向吗？

http://plnkr.co/edit/BtID7a8EnyxuxClwdHkS?p=preview

<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppTest as app">
    <form name="formName" id="formName" style="width: 320px">
        <div ng-repeat="item in currentInfo.attribute">
            <div style="float:left;">{{item.desc}} </div>
            <div style="float:left;">
                <input name="forminput" ng-model="forminput" style="width:200px" type="text" value=""/>
            </div>
        </div>
        <button value="Clear" style="float:left;" ng-click="clearMe()">Clear</button>
    </form>
</body>
</html>

var app = angular.module("app", []);
app.controller("AppTest", function($scope) {
$scope.currentInfo = {
"attribute": [
    {
        "name": "ACCT",
        "desc": "Account #",
    },
    {
        "name": "FNAME",
        "desc": "First Name",
        "type": "VARCHAR",
        "validation": "^[a-zA-Z\\s]+"
    },
    {
        "name": "LNAME",
        "desc": "Last Name",
        "type": "VARCHAR",
        "validation": "^[a-zA-Z\\s]+"
    },
    {
        "name": "MNAME",
        "desc": "Middle Name",
        "type": "CHAR",
        "validation": "^[a-zA-Z]+[1-9]+"
    }
]
};
$scope.clearMe = function (){
    $scope.forminput = "";
};
});

【问题讨论】：

标签： angularjs forms ng-repeat

【解决方案1】：

您正在重复单个 ngmodel="forminput" 使用唯一性，方法是使 forinput 成为一个对象并使用键 ng-model="forminput[item.desc]" 创建唯一模型

首先在你的控制器中

 $scope.forminput = {};

然后在视图中，将输入更改为

演示：

// Code goes here

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

app.controller("AppTest", function($scope) {
   $scope.forminput = {};
  $scope.currentInfo = {
    "attribute": [
        {
            "name": "ACCT",
            "desc": "Account #",
        },
        {
            "name": "FNAME",
            "desc": "First Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "LNAME",
            "desc": "Last Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "MNAME",
            "desc": "Middle Name",
            "type": "CHAR",
            "validation": "^[a-zA-Z]+[1-9]+"
        }
    ]
  };
  $scope.clearMe = function (){
    console.log("herleme")
    $scope.forminput = {};
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="AppTest as app">
    <h1>Hello Plunker!</h1>
    <form name="formName" id="formName">
      <div ng-repeat="item in currentInfo.attribute">
          <div style="float:left;">{{item.desc}} </div>
				<div > <input name="forminput[item.desc]" ng-model="forminput[item.desc]" style="width:200px" type="text" value=""/>
      </div>
      </div>
      <button value="Clear" ng-click="clearMe()">Clear</button>
    </form>
      
  </body>

<input name="forminput[item.desc]" 
ng-model="forminput[item.desc]" 
style="width:200px" type="text" value=""/>

并将其清除为

  $scope.clearMe = function (){
    console.log("herleme")
    $scope.forminput = {};
  };

【讨论】：

A.B：我认为这是一种非常 Angular 的做法，而不是通过对象递归，只是将对象设置回空。谢谢！
@bluevman gald 它帮助了你，接受它作为一个回答，这样它也可以帮助母亲:)

【解决方案2】：

如果我理解，您想在单击“清除”按钮时清除表单中的所有字段吗？

这是一个工作版本：

http://plnkr.co/edit/f0QSDKH7qkM8CcZRU5Js?p=preview

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

app.controller("AppTest", function($scope) {
  $scope.currentInfo = {
    "attribute": [
        {
            "name": "ACCT",
            "desc": "Account #",
        },
        {
            "name": "FNAME",
            "desc": "First Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "LNAME",
            "desc": "Last Name",
            "type": "VARCHAR",
            "validation": "^[a-zA-Z\\s]+"
        },
        {
            "name": "MNAME",
            "desc": "Middle Name",
            "type": "CHAR",
            "validation": "^[a-zA-Z]+[1-9]+"
        }
    ]
  };
  $scope.clearMe = function (){
    for(var i = 0; i < $scope.currentInfo.attribute.length; i++) {
      $scope.currentInfo.attribute[i].forminput = '';
    }
  };
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="app.js"></script>
  </head>

  <body ng-app="app" ng-controller="AppTest as app">
    <h1>Hello Plunker!</h1>
    <form name="formName" id="formName">
      <div ng-repeat="item in currentInfo.attribute">
          <div style="float:left;">{{item.desc}} </div>
                <div style="float:left;"> <input name="forminput" ng-model="item.forminput" style="width:200px" type="text" value=""/>
      </div>
      </div>
      <button value="Clear" ng-click="clearMe()">Clear</button>
    </form>

  </body>

</html>

我使用 currentInfo 模型本身来绑定输入的值。这意味着它们将在 ng-repeat 范围之外可用。然后 clear 函数遍历 'attributes' 数组中的每一项，并将值设置为空字符串。

【讨论】：

rom99 非常感谢！我盯着这段代码看了很久，我什至想不出答案。

【解决方案3】：

您在正确的道路上，但有轻微的错误。所有生成的表单都绑定到相同的模型 - forminput。您必须动态生成模型绑定。

<input name="forminput" ng-model="formmodel[item.name]"/>

在控制器中

$scope.formmodel = {};

查看plunkr

此外，对于生成的表单，将项目签出为autofields，无需重新发明轮子。

【讨论】：