给定一个包含一些options元素的HTML文档, 任务是使用angularJS中的ng-repeat动态添加多个选择的javascript对象数组。
方法：该任务是使用ng-repeat遍历数组完成的。我们称这个数组"楷模"。 DOM中存在的每个选择菜单都将根据其在数组中的特定索引进行建模。例如2nd选择菜单将模仿2nd模型的对象数组中的对象。要向DOM添加更多选择菜单, 我们只需要将一个空对象推入模型的数组即可, ng-repeat指令负责其余的复制。下面我们逐渐为ng-repeat指令中的多项选择添加动态选项。
示例1：在此示例中, 我们将添加多个选择并显示所选数据。
<!DOCTYPE html>
<html ng-app = "gfg">
<head>
<meta charset = "utf-8" />
<script data-require = "angular.js@1.5.x"
src =
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"
data-semver = "1.5.11">
</script>
<script>
var app = angular.module('gfg', []);
app.controller('MainCtrl', function($scope) {
$scope.models = [{}];
$scope.countries = ['India', 'Japan', 'US'];
$scope.states = {
India: ['UP', 'MP', 'Bihar'], Japan: ['Tokyo', 'Yokohama'], US: ['California', 'Texas'], }
$scope.addRow = function() {
$scope.models.push({});
}
$scope.getState = function(country) {
return $scope.states[country];
}
});
</script>
</head>
<body ng-controller = "MainCtrl">
<center>
<h1 style = "color: green;">
lsbin
</h1>
<table>
<tr>
<th>Country</th>
<th>State</th>
<th>Action</th>
</tr>
<tr ng-repeat = "model in models">
<td>
<select ng-options =
"country as country for country in countries"
ng-model = "model.country"
ng-change = 'getState(model.country)'>
</select>
</td>
<td>
<select ng-options =
"state as state for state in getState(model.country)"
ng-model = "model.state">
</select>
</td>
<td>
<button ng-click = "addRow()">Add Row</button>
</td>
</tr>
</table>
<h3 style = "color:green">Selections</h3>
<p ng-repeat = "model in models">
{{model.country}} - {{model.state}}
</p>
</center>
</body>
</html>输出如下：
所有数据已成功添加到对象数组。
示例2：在此示例中, 我们预填充了模型数组。
<!DOCTYPE html>
<html ng-app = "gfg">
<head>
<meta charset = "utf-8" />
<script data-require = "angular.js@1.5.x"
src =
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"
data-semver = "1.5.11">
</script>
<script>
var app = angular.module('gfg', []);
//Prepopulate the models array here
app.controller('MainCtrl', function($scope) {
$scope.models = [{
country: 'India', state: 'UP'
}];
$scope.countries = ['India', 'Japan', 'US'];
$scope.states = {
India: ['UP', 'MP', 'Bihar'], Japan: ['Tokyo', 'Yokohama'], US: ['California', 'Texas'], }
$scope.addRow = function() {
$scope.models.push({});
}
$scope.getState = function(country) {
return $scope.states[country];
}
});
</script>
</head>
<body ng-controller = "MainCtrl">
<center>
<h1 style = "color: green;">
lsbin
</h1>
<table>
<tr>
<th>Country</th>
<th>State</th>
<th>Action</th>
</tr>
<tr ng-repeat = "model in models">
<td>
<select ng-options =
"country as country for country in countries"
ng-model = "model.country"
ng-change = 'getState(model.country)'>
</select>
</td>
<td>
<select ng-options =
"state as state for state in getState(model.country)"
ng-model = "model.state">
</select>
</td>
<td>
<button ng-click = "addRow()">Add Row</button>
</td>
</tr>
</table>
<h3 style = "color:green">Selections</h3>
<p ng-repeat = "model in models">
{{model.country}} - {{model.state}}
</p>
</center>
</body>
</html>输出如下：
我们看到页面现在总是包含国家"India", 并在页面加载时预先填充国家" UP"。
