从动态添加的输入中获取数据
[英]Get data from dynamically added input
问题描述
我有一个输入字段，用户输入文章ID并进行比较。 在第一次应用程序加载时，用户默认有三个输入字段，但他可以动态添加更多输入。我的问题是，如何获取动态添加输入的输入值并将其发送到URL，例如像这样（我知道如何把id放到URL上，这只是为了展示我需要的东西） 'https://someurl.com/' + ID + '/someurl'
我尝试将函数传递给控制器，但是我得到了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>
2 个解决方案
解决方案1
2 已采纳 2017-12-04 08:50:22
它无法正常工作，因为您的submit按钮超出了范围。
1） 您可以在循环内移动按钮以单独提交
要么
2） 通过loooping all提交多个实例。
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：根据您的请求，根据循环选择的索引，使用switch case将choice names分配给相应的scope variables 。
解决方案2
1 2017-12-04 08:40:41
提交选项中的choice.name未定义，因为您的提交按钮超出了ng-repeat的范围
<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(choice.name)">Submit</button>
如果您想提交1个选项，可以将按钮放在ng-repeat中。 如果要提交所有选项，可以在控制器中迭代选择。
更新
如果名称未定义，您可以使用下面的代码迭代选择并提交
angular.forEach($scope.choices, function(value, key) {
if(value.name != undefined)
$scope.submitChoice(value.name)
});
为什么动态添加的输入中最接近的输入名称索引不起作用？
[英]why closest index of input name from dynamically added input not working?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.