Question

我有一个输入字段，用户输入文章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>

Answer 1

它无效，因为您的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：根据您的请求，根据循环选择的索引，使用choice names将scope variables分配给相应的switch case。

Answer 2

提交选项中的

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)
});

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

2 个答案: