如何清除动态ng-repeat表单字段
[英]How to clear dynamic ng-repeat form fields
问题描述
问题：如何清除动态创建的ng-repeat AngularJS表单字段？ 如果你能找到一个我没有找到答案的地方，我会感到惊讶。
背景：我有AngularJS通过服务将JSON拉入我的控制器。 然后我使用范围来重复表格的重复标签。 我无法清理田地。 因为单词没有准确地告诉你我在做什么是基本的代码设置。 我把它砍成了几行。
我试过旧的$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 = "";
};
});
3 个解决方案
解决方案1
3 已采纳 2015-04-15 19:15:12
您正在重复使用每个唯一的ngmodel="forminput"使用，方法是输入一个对象并使用键创建唯一的模型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 = {};
};
解决方案2
0 2015-04-15 19:17:06
如果我理解，您想要点击“清除”按钮清除表单中的所有字段？
这是一个工作版本：
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'数组中的每个项，并将值设置为空字符串。
解决方案3
0 2015-04-15 19:22:24
如何初始化用ng-repeat生成的动态字段？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.