В Angular, есть ли способ установить локальную переменную и ограничить область действия в пределах некоторого HTML?

Question

Я хочу сделать что-то вроде следующего:

<div ng-init="name='john'">
  {{name}}
</div>
<div ng-init="name="jane'">
  {{name}}
</div>

Я бы хотел это напечатать

john
jane

Но вместо этого он напечатает

jane
jane

Я понимаю, что в этом игрушечном примере я мог бы просто поместить имена в массив и использовать ng-repeat

<div ng-repeat="name in ['john','jane']">
  {{name}}
</div>

Но у меня есть немного разные html для каждого значения, но он достаточно близок, поэтому я хотел бы иметь возможность копировать и вставлять без необходимости повторного ввода одного и того же значения снова и снова.

Answer 1

Для достижения ожидаемого результата используйте нижеприведенную опцию присвоения имени другой переменной и используйте его, так как значение области видимости имени меняется везде, где бы оно ни использовалось

<div ng-init="name= test ='john'">
  {{test}}
</div>
<div ng-init="name='jane'">
  {{name}}
</div>

пример кода - https://codepen.io/nagasai/pen/erBxzG

Вариант 2:

Сделать каждое значение именем массива и использовать его индекс для отображения в пользовательском интерфейсе

<div ng-init="name.push('john')">
  {{name[0]}}
</div>
<div ng-init="name.push('jane')">
  {{name[1]}}
</div>

пример кода - https://codepen.io/nagasai/pen/QrGYGK