gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 20:39:18 26 4
gpt4 key购买 nike

问题:如何清除动态创建的ng-repeat AngularJS 表单字段?如果你能找到一个我没有寻找答案的地方,我会感到惊讶。

背景:我有 AngularJS 通过服务将 JSON 拉入我的 Controller 。然后我使用范围来重复表单的标签。我在清理字段时遇到问题。因为文字并不能准确地告诉你我在这里做什么是基本的代码设置。我把它改成了几行。

我试过旧的 $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 = "";
};
});

最佳答案

您正在重复一个 ngmodel="forminput"通过使 forinput 成为一个对象并使用键创建唯一模型来为每个使用唯一的模型 ng-model="forminput[item.desc]"
首先在您的 Controller 中

 $scope.forminput = {};

然后在 View 中,将输入更改为

演示:

// 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 = {};
};

关于angularjs - 如何清除动态 ng-repeat 表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29658694/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com