我可以在运行时隐藏和显示的多个 div 中提供 ng-model 数据吗？

Question

我想在 angular.js 中用作注册表单的一部分时遇到一些数据问题。我将表单拆分为多个“步骤” - 例如公司帐户信息，然后是管理员用户信息，最后是付款信息。这在许多 Web 应用程序中很常见，所以我知道它必须是可能的。

我有三个 div 来容纳表单的每个部分，如下所示：

<div class="lc-block" id="l-register1" data-ng-class="{ 'toggled': lctrl.register1 === 1 }" data-ng-if="lctrl.register1 === 1">

<div class="lc-block" id="l-register2" data-ng-class="{ 'toggled': lctrl.register2 === 1 }" data-ng-if="lctrl.register2 === 1">

<div class="lc-block" id="l-register3" data-ng-class="{ 'toggled': lctrl.register3 === 1 }" data-ng-if="lctrl.register3 === 1">

正如您在此处所说的，这三个部分是隐藏和显示的，基于一些改变变量值以显示给定“步骤”的 ui 交互。

所以这是我的主要问题：我希望“l-register1”中模型的数据在我进行第三步时仍然可用，例如，如果我在“l-register1”中有以下输入字段...

 <input type="text" class="form-control" ng-model="client" placeholder="Company name"> 

...然后我点击“下一步”——我希望仍然能够在步骤 2 和 3 中检索该数据——因为在所有数据到位后我显然需要它，将其发送到我的 API（我已经在使用）

对此的任何帮助都会很棒，我整天都在用头撞墙，试图让它工作！

Answer 1

只需将所有 ng-model 和相关变量放在一个控制器中，您就可以根据条件变量隐藏和显示不同的 div。因此，当您将所有变量引用放在一个控制器中时，它将自动保留与其关联的数据。此外，如果您想为不同的页面使用不同的控制器，也可以实现相同的效果。在这种情况下，您需要提供服务并在两个控制器之间共享数据。只需构建维护共享对象的服务，控制器将处理引用。我已经解释了更多详细信息here。总的来说，这就是单页应用程序的全部内容。