Last active
March 7, 2019 15:42
-
-
Save michelnovellino/d2f14d2f0f4770b1a667996758a9b715 to your computer and use it in GitHub Desktop.
inputs dinamicos
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| bz = this; | |
| /* dentro del controlador usamos un onInit y creamos el array que contendra los valores | |
| para que el ng repeat pueda renderizar los inputs y los 2 unicos metodos necesarios para que funcione */ | |
| bz.$onInit = () => { | |
| $scope.datesList = [new Date()]; | |
| }; | |
| /*recibimos el valor del input (item) comprobamos que exista, y hacemos un push al array */ | |
| bz.newDateElement = (e, item, index) => { | |
| if (!item) return; | |
| $scope.datesList.push(new Date(item)); | |
| }; | |
| /*recibimos el indice del array y con el hacemos un splice para eliminar ese elemento */ | |
| bz.deleteDateElement = (e, index) => { | |
| $scope.datesList.splice(index, 1); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div ng-repeat="date in datesList track by $index" class="form-group"> <!-- recorremos el array --> | |
| <label ng-show="$first=== true" class="text-dark">Fecha</label> <!-- solo se muestra el titulo si es el primer elemento --> | |
| <input type="date" ng-model="datesList[$index]" class="form-control " placeholder="date" /> | |
| <!-- el modelo se asignara dinamicamente por lo que no es necesario un ng-change --> | |
| <a class="text-danger " ng-show="$index >0 || datesList.length > 1" style=" margin: auto;" | |
| ng-click="ctrl.deleteDateElement($event,$index)"> | |
| <!-- | |
| se mostrara el boton de eliminar si la posicion del array es mayor a 0 | |
| solo se mostrara en el primer elemento si el array tiene mas de un elemento | |
| para evitar eliminar todos y no se pueda ingresar la fecha. | |
| --> | |
| <span class="lnr lnr-trash text-danger"></span> | |
| </a> | |
| <a class="add-date-btn" ng-if="$last === true" ng-click="ctrl.newDateElement($event,datesList[$index], $index)"> | |
| <span class="lnr lnr-plus-circle"></span> | |
| Agregar fecha | |
| </a> | |
| <!-- por ultimo el boton de agregar solo aparecera si es el ultimo elemento para que siempre este al final del array --> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment