Angular js - как увеличить в html на основе условия

Question

Я использую угловой повтор для динамического заполнения полей формы. Существует сценарий, когда мне нужно уведомить пользователя (показать! Значок для повторяющихся полей). Ниже приведен фрагмент кода:

<div ng-init="counter = 0"> 
    <div ng-repeat="item in list track by $index"> 
    <div ng-show="{{item.show}}">{{counter+1}}</div> 
    </div> 
    <div ng-show="{{counter > 1}}"> ! </div> 
</div> 

Счетчик переменной только приращение, если его использовать как {{счетчик + $ индекс}}, это может быть возможным без $ индекса?

Answer 1

Назначение переменных внутри html официально не поддерживается.

Но всегда есть хак для того, что вы спросили:

<div ng-init="counter = 0"></div> 
<div ng-repeat="n in [1,2,3,4,5]"> 
    <div style="display:none;">{{ n == 3 ? counter = "World!" : counter = n }}</div> 
    <p>Hello {{ counter }}</p> 
</div> 

Обратите внимание, что я использовал неотображаемые DIV для присвоения «счетчик» условно.

Output: 
Hello 1 
Hello 2 
Hello World! 
Hello 4 
Hello 5 

Ответ на 1-ый комментарий: Когда счетчик == 3, мы разделим его на 2.

<div ng-init="counter = 0"></div> 
<div ng-repeat="n in [1,2,3,4,5]"> 
    <div style="display:none;"> 
     {{ counter = n }} 
     {{ counter == 3 ? counter = counter/2 : counter = counter }} 
    </div> 
    <p>Hello {{ counter }}</p> 
</div> 

Output: 
Hello 1 
Hello 2 
Hello 1.5 
Hello 4 
Hello 5 

Ответ на 3-й комментарий:

я, наконец, понял, что вы спросили. Позвольте мне изменить способ подхода, используя ng-if, чтобы сохранить запись счетчика. Я использовал ng-init для увеличения счетчика, когда n делится на 2. Вам нужно вызвать $ parent. $ Parent.counter, чтобы достигнуть исходного счетчика иначе ng-if создаст свой собственный счетчик внутри области дочернего объекта.

JSFiddle

<div ng-init="counter = 0"></div>  
<div ng-repeat="n in [2,6,5,6,8,9,11] track by $index"> 
    <!-- ngRepeat child scope --> 
    <div ng-if="n % 2 == 0" 
    ng-init="$parent.$parent.counter = $parent.$parent.counter + 1" 
    style="display:none;"> 
     <!-- ngIf also creates a child scope --> 
    </div> 
</div>  
<p>Counter = {{ counter }}</p> 

Output: 
Counter = 4