Me encontré con este problema en varias situaciones,pero usemos un ejemplo aquí. Digamos que tengo un flujo de interacción de envío de formularios. Se compone de tres pasos, por ejemplo, paso de entrada de datos, paso de verificación doble y paso de confirmación. En cada paso, mostraré diferentes información junto con el formulario usando ng-show / ng-hide. La forma en que lo hago ahora es definir el flujo como una máquina de estado y usar una variable interna (por ejemplo, currState) para representar el estado actual y modificar la variable al cambiar a un estado diferente. En ng-show / ng-hide, verifico la variable currState para mostrar / ocultar el elemento. Algo se parece a esto:
En mi controlador angular:
$scope.currState = "DATA_INPUT";
En mi HTML:
<div ng-show="currState == "DATA_INPUT""></div>
Me pregunto si hay algún soporte nativo para este tipo de casos de uso o mejores prácticas / patrones, ya que la forma en que lo estoy haciendo ahora es propensa a errores y no es muy flexible. ¡Gracias!
Respuestas
2 para la respuesta № 1Puedes usar ngSwitch para esto:
http://docs.angularjs.org/api/ng.directive:ngSwitch
Asi que:
<div ng-switch on="state">
<div ng-switch-default>Fist. <button ng-click="state="second"">Next</button></div>
<div ng-switch-when="second">Second. <button ng-click="state="final"">Next</button></div>
<div ng-switch-when="final">Final</div>
</div>