gpt4 book ai didi

javascript - 从动态添加的输入中获取数据

转载 作者:行者123 更新时间:2023-11-30 11:27:02 25 4
gpt4 key购买 nike

我有一个输入字段,用户可以在其中输入文章 ID 并进行比较。在第一次加载应用程序时,用户默认有三个输入字段,但他可以动态添加更多输入。我的问题是,如何获取动态添加输入的输入值并将它们发送到 URL例如像这样(我知道如何将 id 放入 URL,这只是为了展示我需要的东西)'https://someurl.com/' + ID + '/someurl'

我尝试在将输入值传递给 Controller ​​的地方创建函数,但我得到了 UNDEFINED

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {

$scope.choices = [{id: ''}, {id: ''}, {id: ''}];

$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo});
};

$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
}

$scope.submitChoice = function (name) {
alert('url ' + name + ' url');
}
});
body {
font-family:Arial;
color:#333;
}
label {
font-weight:bold;
}
#choicesDisplay {
margin-top:1em;
}
.form-group {
width:70%;clear:both;
}
.form-group input {
float:right;
width:60%;
padding:.3em;
}
button {
background-color:#3f7ebc;
color:white;
padding: .5em .7em .5em .7em;
font-weight:bold;
border:none;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<button ng-show="$last" ng-click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="enter id">
<button ng-click="submitChoice(choice.name)">Submit</button>
</div>
<div id="choicesDisplay">
{{ choices }}
</div>
</body>
</html>

最佳答案

它不起作用,因为您的 submit 按钮在范围之外。

1) 您可以将按钮移到循环内以单独提交

2) 通过循环提交多个实例。

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {

$scope.choices = [{id: ''}, {id: ''}, {id: ''}];

$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':newItemNo});
};

$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
}

$scope.submitChoice = function (name) {
$scope.choices.forEach(function(choice, index){
alert('url ' + choice.name + ' url');
if(choice.name)
{
switch (index) {
case 0:
$scope.first = choice.name;
break;
case 1:
$scope.second = choice.name;
break;
case 2:
$scope.third = choice.name;
break;
case 3:
$scope.fourth = choice.name;
break;
}
console.log($scope.first,$scope.second,$scope.third,$scope.fourth)
}

})

}
});
body {
font-family:Arial;
color:#333;
}
label {
font-weight:bold;
}
#choicesDisplay {
margin-top:1em;
}
.form-group {
width:70%;clear:both;
}
.form-group input {
float:right;
width:60%;
padding:.3em;
}
button {
background-color:#3f7ebc;
color:white;
padding: .5em .7em .5em .7em;
font-weight:bold;
border:none;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<button ng-show="$last" ng-click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="enter id">

</div>
<button ng-click="submitChoice()">Submit</button>

<div id="choicesDisplay">
{{ choices }}
</div>
</body>
</html>

请为第二个示例运行上面的代码片段

PS:根据您的要求,根据循环中选择的索引,将选择名称分配给相应的范围变量,使用切换大小写

关于javascript - 从动态添加的输入中获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47629263/

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