AngularJS-在counter++上添加DOM元素

Question

我是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的值。将根据counter值的更改创建一个div。在DOM中创建的div的数量将取决于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操作方面几乎可以做任何事情，但不知道在实际构建指令时从哪里开始。

Answer 1

实现这一点的一种方法是使用ng repeat指令基于数组绘制div，该数组最初为空。您可以设置html，以便为数组中的每个对象绘制一个div，因为数组是空的，所以最初不会绘制div。

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

单击按钮时，可以将包含任何所需数据的对象添加到数组中。然后，将为相应的ng-reeat指令绘制一个div。

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

请参阅此处的plunker。