AngularJS - Добавить элементы DOM на counter ++

Question

AngularJS - Добавить элементы DOM на counter ++

0

Я новичок в AngularJS и немного прочитал о том, как работают directives. Тем не менее, я все еще не совсем уверен, как решить эту проблему.

Здесь настройка:

У меня есть кнопки на виде так:

<div class="parent">
  <button class="firstButton" type="button" ng-click="fetchData(param1, param2)"></button>
  <button class="secondButton" type="button" ng-click="fetchData(param1, param2)"></button>
  <button class="thirdButton" type="button" ng-click="fetchData(param1, param2)"></button>
  <button class="fourthButton" type="button" ng-click="fetchData(param1, param2)"></button>
</div>
<div class="dataPanel">

 <!-- This is where DIVs will be placed -->

</div>

Затем в моем контроллере я:

// Init value of counter here
var counter = 0;

$scope.fetchData = function (param1, param2) {

  // Do something with parameters here

  counter++;
}

Идеальный сценарий был бы, когда пользователь нажимает на firstButton, fetchData() инициирует, получает данные с фабрики, а затем увеличивает значение counter. Div будет создан из изменения значения counter. Количество div, созданных в DOM, будет зависеть от значения counter. Каждый созданный div также заполняется данными, полученными из каждого соответствующего fetchData(). Это происходит, как пользователь нажимает на более кнопок, хотя в моем текущем проекте, я ограничил число разрешенных dataSet дублей.

Конечным результатом HTML будет:

<div class="dataPanel">
 <div class="dataSet">  <!-- from firstButton -->
  <p>{{dataFromFirstButton}}</p>
 </div>
 <div class="dataSet">  <!-- from secondButton -->
  <p>{{dataFromSecondButton}}</p>
 </div>
 <div class="dataSet">  <!-- from thirdButton-->
  <p>{{dataFromThirdButton}}</p>
 </div>
</div>

Какой Угловой способ сделать это? Я читал директивы, которые могут в значительной степени делать все, когда дело доходит до манипуляции с DOM, но не имеют представления о том, с чего начать, когда дело доходит до фактической конструирования директивы.

floatyourboat 27 окт. 2015, в 22:03

Источник

0

Что если дважды нажать первую кнопку, должно ли это создать два элемента? Или должен быть только один div, созданный для кнопки?
null 27 окт. 2015, в 20:25
0

упростите это до одной кнопки и одного списка вывода на данный момент. Используйте ng-repeat и различные фильтры, которые он предоставляет для ваших данных. Как только вы получите эту работу, начните модульную работу с директивой. Вы, кажется, пытаетесь слишком много за один раз, и вам нужно немного познакомиться с тем, как работает угловая
charlietfl 27 окт. 2015, в 20:45

Теги:

angularjs

angularjs-directive

dom-manipulation

1 ответ

Ещё вопросы

Что если дважды нажать первую кнопку, должно ли это создать два элемента? Или должен быть только один div, созданный для кнопки?
упростите это до одной кнопки и одного списка вывода на данный момент. Используйте ng-repeat и различные фильтры, которые он предоставляет для ваших данных. Как только вы получите эту работу, начните модульную работу с директивой. Вы, кажется, пытаетесь слишком много за один раз, и вам нужно немного познакомиться с тем, как работает угловая

Fridjon Gudjohnsen · Accepted Answer · 2015-10-27T18-49-00.000Z

Один из способов добиться этого - использовать директиву ng-repeat для рисования div на основе массива, который изначально пуст. Вы можете установить html так, чтобы div рисовался для каждого объекта в массиве, так как массив пуст, а div изначально не нарисован.

<div class="dataSet" ng-repeat="n in arrays[0]">
  This div from button 1 contains: {{n.data}}
</div>

Когда вы нажимаете на кнопки, вы можете добавить в массив объект, содержащий любые необходимые данные. Затем будет выделен div для соответствующей директивы ng-repeat.

  $scope.arrays = [ [], [], [], []];

  $scope.fetchData = function (data, idx) {
    $scope.arrays[idx].push({data: data});
  }

Смотрите здесь плункер.