Question

首先，让我解释一下我正在寻找的效果：

布局：

效果

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

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

使用4 ng-switch-when属性创建4个div。每个div都包含一个标题。第一个div包含标题为＆＃34;选择...＆＃34;写在上面。第二个div包含标题为＆＃34;选择[input1text]和...＆＃34;写在上面。第三个div包含带＆＃34的标题;选择___和[input2text]＆＃34;写在上面。最后的div有＆＃34;在[input1text]和[input2text]＆＃34;之间进行选择。写在上面。每个div都有一个ng-switch-when属性，它们是：＆＃34; not-pressed＆＃34;，＆＃34; first-pressed＆＃34;，＆＃34; second-pressed＆＃34;，＆＃ 34;分别按下＆＃34;和
如果有人开始输入input1，我会看到第二次按下状态或两次按下状态当前是否处于活动状态。如果是，我将状态设置为双击。否则，我将状态设置为first-pressed。
如果有人开始输入input2，我会看到第一次按下状态还是双按状态当前是否处于活动状态。如果是，我将状态设置为双击。否则，我将状态设置为二次按下。

我认为我编写它的方式非常笨拙和混乱，我想对是否有更好的方法来评估此功能的逻辑。再一次，我不寻找代码。我只是想看看是否有更好的逻辑。

Answer 1

我会为每个输入分配ng-model。然后每个标题有三个div，每个标题引用所需的ng-model（choice1，choice 2和both）。然后我会在三个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>

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