Selección múltiple AngularJS. Las listas despegables son muy usadas en cualquier proyecto. Sin embargo, las listas desplegables de selección múltiple nos permiten realizar múltiples selecciones dentro de la lista desplegable.
Recursos para implementar AngularJS Multiselect
Vamos a usar sencillos pasos para mostrar la lista desplegable dinámica de múltiples con información extraída desde una tabla de base de datos MySQL. Además, detallaremos 5 pasos para lograr nuestro objetivo.
- Crear tabla de base de datos MySQL
- Incluir archivos Bootstrap, AngulaJS y CSS
- Lista desplegable de diseño con aplicación angular y controlador
- Cargar lista desplegable dinámicamente
- Obtener registros de la base de datos MySQL
Selección múltiple AngularJS usando PHP y MySQL: Estructura
Para crear la lista desplegable AngularJS Multiselect utilizando PHP y MySQL, la estructura de archivos para este ejemplo es la siguiente.
- index.php
- multiselect.js
- app.js
- getData.php
- config.php
También, incluiremos librerías y gestores externas que son elementos imprescindibles para nuestro proyecto como ser:
- Framework Bootstrap 5
- Framework de JavaScript Angulas JS
- Base de datos MySQL
- HTML
- Lenguaje PHP
Primer paso: Crear tabla de base de datos MySQL
Nuestra lista desplegable mostrara datos dinámicamente desde la tabla de la base de datos MySQL, primero crearemos la tabla de base de datos MySQL llamado «personal» utilizando la siguiente consulta e insertaremos algunos registros para mostrar en la lista desplegable.
CREATE TABLE `personal` (
`id` int(11) NOT NULL,
`personal_nombre` varchar(120) COLLATE utf8mb4_unicode_ci NOT NULL,
`personal_salario` double NOT NULL,
`personal_dad` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='Tabla Personal';
-- Volcado de datos para la tabla `personal`
INSERT INTO `personal` (`id`, `personal_nombre`, `personal_salario`, `personal_dad`) VALUES
(1, 'Maria Figueroa', 1500, 25),
(2, 'Jose Gamarra', 2500, 35),
(3, 'Carlos Zambrano', 1700, 27),
(4, 'Lucia Candia', 3400, 36);
-- Índices para tablas volcadas
ALTER TABLE `personal`
ADD PRIMARY KEY (`id`);
-- AUTO_INCREMENT de la tabla `personal`
ALTER TABLE `personal`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;Segundo paso: Incluir archivos Bootstrap, AngulaJS y CSS
Es importante incluir framework como Bootstrap y AngularJS, por lo que incluiremos dentro de la etiqueta HEAD. También incluiremos el módulo angular de selección múltiple para manejar la funcionalidad de selección múltiple en la lista desplegable.
Además, incluiremos los archivos multiselect.js y app.js como en el siguiente ejemplo.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script src="js/multiselect.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/style.css" />Tercer paso: Lista desplegable con aplicación angular y controlador
Vamos a maquetar una lista desplegable en el fichero index.php con Angular Application and Controller. Por lo tanto, el HTML para la lista de selección múltiple manejada con mulitselect.js usando como plantilla multiselect.tmpl.html.
Los nombres del personal enumerados en la lista desplegable de forma dinámica con datos de MySQL.
<div class="container" ng-app="multiselect_app" ng-controller="multiselect_controller">
<h4>Ver lista de personal</h4>
<multiselect class="input-xlarge" multiple="true"
ng-model="selectedEmp"
options="c.nombre for c in emp_list"
change="selected()" ></multiselect>
<br>
<br>
{{selectedEmp}}
</div>Cuarto paso: Cargar la lista desplegable dinámicamente
Todo empieza en app.js y solicitaremos a getData.php para obtener datos de la tabla personal y asignarlos a emp_list para mostrarlos en index.php de manera dinámica.
(function(angular) {
'use strict';
var app = angular.module('multiselect_app', ['ui.multiselect']);
app.controller('multiselect_controller', function($scope, $http) {
$scope.emp_list = '';
$http.get('getData.php').success(function(empData){
$scope.emp_list = empData;
});
});
})(angular);Pasos 5: Obtener datos de la base de datos MySQL
Por último, veremos las consultas SQL del PHP para obtener los registros de la tabla personal y los almacenaremos en una matriz. por consiguiente, los devolveremos en formato JSON para que sea visible en el HTML.
<?php
include_once("config.php");
$sql = "SELECT id,personal_nombre as nombre FROM personal LIMIT 30";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$emp_data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$emp_data[] = $rows;
}
echo json_encode($emp_data);
exit;
?>Conclusión
En este articulo hemos creado una lista desplegable de selección múltiple con datos dinámicos usando Angular JS. La lista desplegable devuelve datos de elementos seleccionados en formato JSON para implementar más de acuerdo con sus requisitos.
Si desean pueden implementar una conexión y consultas usando PDO. Además, pueden guardar la selección múltiple en una base de datos.
Hemos usado Bootstrap 5 pero pueden usar otros framework para los estilos dependiendo de sus proyectos.
Si observamos la integración de esta modalidad es muy sencilla y pueden usarlo en sus proyectos web
