在angular.js控制器中为应用的内部状态定义变量来显示/隐藏元素

Define variables for internal app states in angular.js controller to show/hide elements

本文关键字：变量 定义 显示 元素 隐藏 状态 内部 控制器 js angular 应用      更新时间：2023-09-26

我在很多情况下都遇到过这个问题，但我们在这里只举一个例子。假设我有一个表单提交的交互流。它由三个步骤组成，即数据输入步骤、双重检查步骤和确认步骤。在每一步中，我将使用ng-show/ng-hide显示不同的相关信息以及表单。我现在的方法是像定义状态机一样定义流，并使用内部变量(例如currState)来表示当前状态，并在切换到不同状态时修改变量。在ng-show/ng-hide中，我检查currState变量来显示/隐藏元素。如下所示:

在我的Angular控制器中: 
$scope.currState = 'DATA_INPUT';

在我的HTML中:

<div ng-show="currState == 'DATA_INPUT'"></div>

我想知道是否有任何本机支持这种用例或最佳实践/模式，因为我现在做的方式是容易出错的，不是很灵活。谢谢!

您可以使用ngSwitch:

http://docs.angularjs.org/api/ng.directive ngSwitch

: 

<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>
相关文章：