我应该如何处理为更复杂的 ng-model 功能编写代码的逻辑？

Question

首先解释一下我要找的效果：

布局：

• 页面顶部的标题显示“在...之间进行选择”。
• 下面有两个输入框，input1 和 input2

效果

• 如果用户首先在 input1 中的 [choice1] 中输入内容，标题会自动更新并显示“在 [choice 1] 和...之间进行选择”
• 如果用户首先在 input2 中的 [choice2] 中输入内容，标题会自动更新并显示“在 ___ 和 [choice2] 之间选择”
• 如果用户已经在一个输入中写入并开始在另一个输入中写入，标题会自动更新并显示“在 [choice1] 和 [choice2] 之间进行选择”。

现在，我已经编写了 angular-js 代码来实现这一点。我不是在寻找关于 如何 达到效果的答案。相反，我想知道实现此效果的最佳方法的逻辑，因为我认为我的做法可以改进。

最后，这是我使用的逻辑：

1. 创建 4 个具有 4 个 ng-switch-when 属性的 div。每个 div 包含一个标题。第一个 div 包含标题，上面写着“在...之间选择”。第二个 div 包含标题，上面写着“在 [input1text] 和...之间选择”。第三个 div 包含一个标题，上面写着“在 ___ 和 [input2text] 之间选择”。最终 div 上写有“在 [input1text] 和 [input2text] 之间选择”。每个 div 都有一个 ng-switch-when 属性，它们分别是：“未按下”、“第一次按下”、“第二次按下”和“同时按下”
2. 如果有人开始输入 input1，我会查看当前是否处于第二按状态或双按状态。如果是，我将状态设置为同时按下。否则，我将状态设置为首次按下。
3. 如果有人开始输入 input2，我会查看当前是否处于第一次按下状态或同时按下状态。如果是，我将状态设置为同时按下。否则，我将状态设置为第二次按下。

我认为我编写它的方式非常笨拙和混乱，我想就是否有更好的方法来评估此功能的逻辑提出意见。同样，我不是在寻找代码。我只是想看看是否有更好的逻辑。

Answer 1

我会将 ng-model 分配给每个输入。然后为每个标头设置三个 div，每个标头都引用所需的 ng-model（选择 1、选择 2 和两者）。然后，我会在三个 div 中的每一个上使用 ng-if 来测试 ng-model 是否为空。

Answer 2

• ng-switch-when 块中只有 2 个“div”。
• choice1 和 choice2 是 ng-model 的一部分
• ng-switch on 检查 choice1 或 choice2 是否不是空字符串。这意味着：choice1 不为空，或choice2 不为空，或choice1 和choice2 不为空

• ng-switch-when = true 然后渲染。请注意，至少输入了一个选项。

  <div> 
    <h2> Choose between {{choice1 === "" ? "____" : choice1}} and {{choice2 === "" ? "..." : choice2}} </h2> 
  </div>
  

• ng-switch-default 会将标头呈现为 Choose between ...

编辑： 实际上，我认为最好将div 作为ng-switch 之外的包装器，然后只呈现内部元素。似乎无论输入的值如何，您都将始终显示标题。