Skip to content

Instantly share code, notes, and snippets.

@michelnovellino
Last active March 7, 2019 15:42
Show Gist options
  • Select an option

  • Save michelnovellino/d2f14d2f0f4770b1a667996758a9b715 to your computer and use it in GitHub Desktop.

Select an option

Save michelnovellino/d2f14d2f0f4770b1a667996758a9b715 to your computer and use it in GitHub Desktop.
inputs dinamicos
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);
};
<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