Get data from dynamically added input
Question
I have an input field where the user enters article ID and compare. 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'
I try to make function where I pass entered value to controller but I get 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 answers
solution1
2 ACCPTED 2017-12-04 08:50:22
It is not working because, your submit button is outside of the scope.
1) You either move the button inside loop to submit individually
or
2) Submit multiple instances by 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 .
solution2
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
<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. 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)
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.