Javascript 我应该如何处理为更复杂的ng模型特性编写代码的逻辑？

首先，让我解释一下我想要的效果：

布局：

• 页面顶部的标题，上面写着“在……之间进行选择”
• 下面有两个输入框，input1和input2

影响

• 如果用户开始在input1中的[choice1]中首先键入，则标题会自动更新并显示“在[choice1]和[choice1]之间进行选择”
• 如果用户开始在input2中的[choice2]中首先键入，则标题将自动更新并显示“在__________;和[choice2]之间选择”
• 如果用户已经写入了一个输入并开始写入另一个输入，则标题会自动更新并显示“在[choice1]和[choice2]之间进行选择”

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

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

属性时使用4 ng开关创建4个div。每个div包含一个头。第一个div包含写有“在…之间进行选择”的标题。第二个div包含写有“在[input1text]和…”之间进行选择”的标题。第三个div包含一个头，上面写着“在uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu和[input2text]之间进行选择”。最后一个div上写着“在[input1text]和[input2text]之间进行选择”。每个div都有一个ng开关，当属性为“未按下”、“第一次按下”、“第二次按下”和“均按下”时，它们分别为

如果有人开始输入input1，我会查看第二个按下状态或两个按下状态当前是否处于活动状态。如果一个是，我将状态设置为“同时按下”。否则，我将状态设置为首次按下

如果有人开始输入input2，我会查看第一次按下的状态或两次按下的状态当前是否处于活动状态。如果一个是，我将状态设置为“同时按下”。否则，我将状态设置为第二次按下

---

我认为我写这篇文章的方式非常笨拙和混乱，我想知道是否有更好的方式来理解这篇文章的逻辑。同样，我不是在寻找代码。我只是想看看是否有更好的逻辑

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

当块时，

ng开关中只有2个'div'
choice1
和
choice2
是
ng车型的一部分
ng开关打开
检查
choice1
或
choice2
是否为空字符串。这意味着：
choice1
不为空，或者
choice2
不为空，或者
choice1
和
choice2
不为空
ng开关当=true时
然后渲染。请注意，至少输入了一个选项

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


在{choice1===“”？“{choice1}}和{{choice2===“”？“…”：choice2}之间选择

ng开关默认值
将标题呈现为
在…

编辑：
实际上，我认为最好在
ng开关
外部使用
div
作为包装器，然后只渲染内部元素。似乎不管输入值是什么，您都会显示标题
 angular中的双括号是否允许您拥有这样的逻辑？这取决于您使用的angular版本，它适用于大于1.1.4的angular版本