Как сделать повторения блока после нажаття на кнопку в Angular?

Question

[Александр Ковальчук]

У меня в форме есть определенный блок данных который должен повторяться после нажаття на кнопку

Еще один блок

Как это лучше сделать (проблема в том что с помощью jqery НЕ прописываются значения Angular выражений), да и чувствую что это можно изящно сделать средствами Angular

<div class="panel panel-default" >
            <div class="panel-heading"><b> Пример : {{applianceName }}</b></div>
            <div class="panel-body">
              <div class="form-group">
                <label> Пример:</label>
                <select class="form-control" required ng-model="applianceName" >
                  <option ng-repeat="applic in appliance" required>{{ applic.name }}</option>
                </select>
              </div>

              <div class="form-group">
                <label> Пример:</label>
                <select class="form-control" required>
                  <option ng-repeat="behavior in behavior" required>{{behavior.name}}</option>
                </select>
              </div>   
            </div>
          </div>
    <div class="form-group">
      <button type="button"
              class="btn btn-primary btn-lg btn-block"">
        <span class="glyphicon glyphicon-plus"></span>
        Еще один блок
      </button>

Answer 1

[Сергей Протько]

да и чувствую что это можно изящно сделать средствами Angular

Для начала давайте проникнемся идеями декларативной разметки. Все эти ng-repeat, ng-hide и т.д. не выполняют никаких действий а просто реагируют на изменения состояния, а вы этими штуками описываете как оно должно реагировать.

Теперь к нашей задаче. У нас есть какой-то массив, который был задан в контроллере (еще попрошу вас избавиться от $scope в контроллерах и перейти на controllerAs синтаксис). Что бы UI отреагировал на изменения состояния нам это состояние надо изменить. То есть по клику дернуть метод контроллера, который добавить элемент в массив. И все.

Comments

[DarthJS]

А почему лучше перейти на controllerAs? И почему им так редко пользуются, если он лучше?

[Сергей Протько]

DarthJS: лучше - что бы убрать зависимость от scope. Если не использовать scope напрямую (по сути это довольно внутренняя штука которую юзать можно только в link директив), то перестаешь гарадить вотчеры и начинаешь делать нормальный MVC.

Что до "редко пользуется" - у вас выборка не репрезентативна. Между прочим это рекомендация есть даже в angular-styleguide