Angular JS - как увеличить HTML в зависимости от условия

Question

Angular JS - как увеличить HTML в зависимости от условия

0

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

<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>

Переменная счетчика увеличивается только в том случае, если она используется как {{counter + $ index}}, возможно ли это без индекса $?

ManishSForce 29 июль 2016, в 09:20

Источник

0

счетчик = счетчик + 1?
Hardik Vaghani 29 июль 2016, в 07:24
1

ng-show="item.show"
dfsq 29 июль 2016, в 07:37
0

Что именно вы ищете для уведомления о повторяющихся значениях. Разместите свой полный код в скрипке.
Mohit Tanwani 29 июль 2016, в 07:52
0

Что такое «предмет»? Как вы говорите, какой "элемент" дублируется? У него есть дубликат ID? Это номер? Строка? Мы не можем читать чьи-то мысли.
Marin Takanov 29 июль 2016, в 07:57
0

@MarinTakanov, у элемента есть свойство show, которое упоминается во фрагменте кода. нг-шоу = "{{}} item.show
ManishSForce 29 июль 2016, в 18:15
0

Это все еще не имеет никакого смысла. По указанному вами коду, show - это свойство, которое не сравнивается ни с одним другим item . Вы должны рассказать нам, как вы определяете дублирующиеся items ? Например, являются ли {address: 'baz', name: 'foo'} и {address: 'xyz', name: 'foo'} одинаковыми элементами? Здесь, если name является свойством для сравнения, эти два элемента одинаковы / дубликаты.
Marin Takanov 30 июль 2016, в 07:09
0

@MarinTakanov, я не могу вставить весь код здесь. Я не частый пользователь этого сообщества, но позвольте мне задать свой вопрос еще раз, возможно ли получить приращение счетчика на основе условия в угловом ng-repeat?
ManishSForce 31 июль 2016, в 06:57
0

@cmApex, конечно, это так, и если вам нужна более сложная логика, вы можете использовать методы в контроллере. Но, к сожалению, этот вопрос не имеет смысла, поэтому, пожалуйста, обновите его, предоставив как можно больше информации.
gdyrrahitis 01 авг. 2016, в 00:49

Показать ещё 6 комментариев

Теги:

angularjs

1 ответ

Ещё вопросы

Что именно вы ищете для уведомления о повторяющихся значениях. Разместите свой полный код в скрипке.
Что такое «предмет»? Как вы говорите, какой "элемент" дублируется? У него есть дубликат ID? Это номер? Строка? Мы не можем читать чьи-то мысли.
@MarinTakanov, у элемента есть свойство show, которое упоминается во фрагменте кода. нг-шоу = "{{}} item.show
Это все еще не имеет никакого смысла. По указанному вами коду, show - это свойство, которое не сравнивается ни с одним другим item . Вы должны рассказать нам, как вы определяете дублирующиеся items ? Например, являются ли {address: 'baz', name: 'foo'} и {address: 'xyz', name: 'foo'} одинаковыми элементами? Здесь, если name является свойством для сравнения, эти два элемента одинаковы / дубликаты.
@MarinTakanov, я не могу вставить весь код здесь. Я не частый пользователь этого сообщества, но позвольте мне задать свой вопрос еще раз, возможно ли получить приращение счетчика на основе условия в угловом ng-repeat?
@cmApex, конечно, это так, и если вам нужна более сложная логика, вы можете использовать методы в контроллере. Но, к сожалению, этот вопрос не имеет смысла, поэтому, пожалуйста, обновите его, предоставив как можно больше информации.

KinoP · Accepted Answer · 2016-07-29T07-06-00.000Z

Назначение переменных внутри 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

Спасибо @KinoP, но это не будет служить цели. Можно ли рассчитать число, деленное на 2, на вашем примере? Если да, пожалуйста, вставьте фрагмент кода, это решит мою проблему.
@crmApex Я не уверен, что понимаю вашу проблему, но проверьте обновленный ответ выше. Условное выражение {{логическое? true case: false case}} довольно мощный.
Благодарю. Я хочу вывод: 2, потому что в вашем списке n [1,2,3,4,5] только 2 & 4 делится на 2. Теперь рассмотрим факт динамического списка. Предположим, что n имеет [2,6,5,6,8,9,11], поэтому выведите: 4, поскольку n имеет (2,6,6,8), которые делятся на 2. Итак, в основном {{counter}} нужно увеличивать, когда элемент n делится на 2 и остаток = 0.
Благодарю. Я получил то, что я спросил. $ parent. $ parent.counter , послужил цели.