从动态添加的输入中获取数据
[英]Get data from dynamically added input
问题描述
I have an input field where the user enters article ID and compare. 
我有一个输入字段，用户输入文章ID并进行比较。 On first application load, the user has by default three input field, but he can dynamically add more inputs.My problem is, how to get the entered value of dynamically added inputs and send them to URL for example like this (I know how to put id's to URL, this is only for showing what I need) 'https://someurl.com/' + ID + '/someurl' 在第一次应用程序加载时，用户默认有三个输入字段，但他可以动态添加更多输入。我的问题是，如何获取动态添加输入的输入值并将其发送到URL，例如像这样（我知道如何把id放到URL上，这只是为了展示我需要的东西） 'https://someurl.com/' + ID + '/someurl'
I try to make function where I pass entered value to controller but I get UNDEFINED 我尝试将函数传递给控制器，但是我得到了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
It is not working because, your submit button is outside of the scope. 它无法正常工作，因为您的submit按钮超出了范围。
1) You either move the button inside loop to submit individually 1） 您可以在循环内移动按钮以单独提交
or 要么
2) Submit multiple instances by loooping all. 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>
Please run the above snippet for second example 请运行上面的代码片段以获取第二个示例
PS: As per your request, based on the index of the choice in loop, assigned the choice names to respective scope variables using switch case . PS：根据您的请求，根据循环选择的索引，使用switch case将choice names分配给相应的scope variables 。
解决方案2
1 2017-12-04 08:40:41
choice.name in submit choice is undefined because your submit button is outside the scope of ng-repeat 提交选项中的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>
If you want to submit 1 choice you can place your button inside ng-repeat. 如果您想提交1个选项，可以将按钮放在ng-repeat中。 If you want to submit all choices you can iterate through choices in your controller. 如果要提交所有选项，可以在控制器中迭代选择。
Update 更新
you can use below code to iterate through choices and submit if name is not undefined 如果名称未定义，您可以使用下面的代码迭代选择并提交
angular.forEach($scope.choices, function(value, key) {
if(value.name != undefined)
$scope.submitChoice(value.name)
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.