How should I approach the logic for writing the code for a more complex ng-model feature?

Question

First, let me explain the effect I am looking for:

Layout:

• Header at the top of the page that says "Choose between...".
• Two input boxes below, input1 and input2

Effect

• If the user begins typing first in [choice1] in input1, the header auto-updates and says "Choose between [choice 1] and..."
• If the user begins typing first in [choice2] in input2, the header auto-updates and says "Choose between ___ and [choice2]"
• If the user has already written in one input and begins writing in the other input, the header auto-updates and says "Choose between [choice1] and [choice2]".

Now, I have already written the angular-js code to achieve this. I am not looking for an answer on how to achieve the effect. Instead, I want to know the logic for the best way to achieve this effect because I think the way I did it could be improved.

Finally, here is the logic I used:

1. Create 4 divs with 4 ng-switch-when properties. Each div contains a header. First div contains header with "Choose between..." written on it. Second div contains header with "Choose between [input1text] and..." written on it. Third div contains a header with "Choose between ___ and [input2text]" written on it. Final div has "Choose between [input1text] and [input2text]" written on it. Each div has an ng-switch-when property, they are: "not-pressed", "first-pressed", "second-pressed", and "both-pressed", respectively
2. If someone starts typing in input1, I see if either second-pressed state or both-pressed state is currently active. If one is, I set the state to both-pressed. Otherwise, I set the state to first-pressed.
3. If someone starts typing in input2, I see if either first-pressed state or both-pressed state is currently active. If one is, I set the state to both-pressed. Otherwise, I set the state to second-pressed.

I think the way I wrote it is really clunky and messy and I'd like an opinion on if there is a better way to apprach the logic to this feature. Again, I am not looking for code. I just want to see if there is better logic.

Answer 1

I would assign ng-model to each of the inputs. Then have three divs for each header each referencing the required ng-model (choice1, choice 2 and both). I would then use ng-if on each of the three divs to test if the ng-model was empty for either choice or not.

Answer 2

• I would only have 2 'div', in the ng-switch-when block.
• choice1 and choice2 are part of ng-model
• ng-switch on checks whether choice1 or choice2 is not an empty string. This means: choice1 is not empty, or choice2 is not empty, or choice1 and choice2 are not empty

• ng-switch-when = true then renders. Note as least one of the choices is entered.

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

• ng-switch-default would render the header as Choose between ...

Edit: Actually, I think it's better to have a div as a wrapper outside the ng-switch, then renders only inner element. It seems like regardless of of the values of the inputs, you will always show the header.