Como puedo emplear ng-repeat y solo mostrar la primera opción

publicado por: Anonymous

Quisiera saber como utilizar un ng-repeat pero solo quiero mostrar la primera opción, las demás opciones van a depender de un botón!

Este es el código: http://plnkr.co/edit/oxtojjEPwkKng9iKkc14?p=preview

Quiero que se visualice la primera opción, el primer select y el input numérico, y los demás se van a visualizar al darle click al botón, el botón va a aparecer hasta que ya no haya más opciones que seleccionar.

En este caso si selecciona una opción y un puntaje se guarda en el array, y si quiere seleccionar más opciones le da click al botón para agregar otra opción.

Gracias por la ayuda!

solución

La forma más fácil es usando el filtro limitTo

Crea un nuevo array o cadena de caracteres conteniendo sólo el número especificado de elementos. Los elementos son tomados de tanto del principio como el final del arreglo, cadena o número inicial, según esté especificado por el valor y signo (positivo or negativo) del límite. Si el valor entrado es un número es convertido primero a una cadena.

Luego haces algo como

<div ng-repeat="opt in myOptions | limitTo : 1">
 {{opt.text}}
</div>

Este método tiene las siguientes ventajas:

  • Las operaciones se hacen en memoria y antes de procesar el ng-repeat lo cual es mucho más eficiente que manipular tus datos con otras directivas
  • Si cambias de idea y quieres mostrar más valores solo tienes que cambiar un valor y listo.
  • Los parámetros de limitTo se evalúan como cualquier expresión de angular y se pueden controlar con variables

_x000D_

_x000D_

angular.module('app', [])_x000D_
  .controller('MyCtrl', function($scope) {_x000D_
    $scope.cantidad = 1;_x000D_
    $scope.opciones = [{_x000D_
      value: '1',_x000D_
      text: 'opcion 1'_x000D_
    }, {_x000D_
      value: '2',_x000D_
      text: 'opcion 2'_x000D_
    }];_x000D_
  });

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
<div ng-app="app" ng-controller="MyCtrl">_x000D_
  <div ng-repeat="opt in opciones | limitTo : cantidad">_x000D_
    {{opt.text}}_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *