Dado un documento HTML que contiene algún elemento de opciones y la tarea es agregar una array de objetos javascript dinámicamente con selecciones múltiples usando ng-repeat en angularJS.
Enfoque: la tarea se realiza utilizando ng-repeat que recorre una array. Llamemos a esta array «modelos» . Cada menú de selección presente en el DOM se modela en su índice específico en la array. Por ejemplo, el segundo menú de selección se modelaría en el segundo objeto de la array de objetos del modelo. Para agregar más menús de selección al DOM, solo necesitamos enviar un objeto vacío a la array del modelo, la directiva ng-repeat se encarga del resto de la reproducción.
Ejemplo 1: En este ejemplo, agregaremos selecciones múltiples y mostraremos los datos seleccionados.
<!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;">
GeeksForGeeks
</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>
Salida: todos los datos se agregan con éxito a la array de objetos.
Ejemplo 2: En este ejemplo, rellenamos previamente la array de modelos.
<!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;">
GeeksForGeeks
</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>
Salida: Vemos que la página ahora siempre contiene el país «India» y el estado «ARRIBA» como se rellena previamente en la carga de la página.