gpt4 book ai didi

javascript - 清除 AngularJS 动态表单中的字段

转载 作者:行者123 更新时间:2023-11-28 04:54:31 26 4
gpt4 key购买 nike

这是我的 angularjs 代码:

function addController($scope, $http) {
$scope.update = [];
$scope.properties = [];

$scope.addProperties = function(property) {
$scope.properties.push({});
}
$scope.add = function() {
$scope.update.push({
"tableName": $scope.tableName,
"name": $scope.name,
"properties": $scope.properties
});
$scope.tableName = undefined;
$scope.name = undefined;

}

}
<!DOCTYPE html>
<html ng-app>

<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body ng-controller="addController">

<div class="col-sm-10">
<label class="control-label">TableName:</label>
<input type="text" class="form-control" ng-model="tableName" /><br />
</div>

<div class="col-sm-10">
<label class="control-label">Name:</label>
<input type="text" class="form-control" ng-model="name" /><br />
</div>

<div class="col-sm-10">
<label class="control-label">Properties:</label>
<fieldset ng-repeat="property in properties track by $index">
<label class="control-label">Column Name:</label>
<input type="text" class="form-control" ng-model="property.columnName" /><br />
<label class="control-label">Name:</label>
<input type="text" class="form-control" ng-model="property.name" /><br />

</fieldset>
<button class="btn btn-default" ng-click="addProperties()">Add Properties</button>
</div>
<div class="col-sm-10">
<input type="submit" ng-click="add()" />
<pre>{{update[0]|json}}</pre>
</div>
</body>

</html>

这里的 ColumnName 和 name 是通过单击 addProperties 按钮添加的动态文本框。

我的问题出在 add() 函数中。一旦表单元素被推送到 update(array) 我希望清除表单元素。tableName 和 name 被分配为未定义,因为它们不是动态的并且工作正常。你能帮我将columnName和name字段分配为null或undefined吗?(特别注意:分配为null或undefined只能影响 View 。插入更新数组内的值不得更改)

最佳答案

将您的 addProperties 方法更新为此。

    $scope.addProperties = function (property) {
$scope.properties.push(property);
$scope.property = {name:"", columnName:""}
}

这将重置 View 中的属性,我也不会在 View 中的 Prop 上使用 ng 重复,因此您将只有一组输入需要编辑。

关于javascript - 清除 AngularJS 动态表单中的字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42645101/

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