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>

这样做的 Angular方式是什么？当涉及到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-repeat指令绘制一个div。

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

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

请参阅plunker here。

AngularJS - 在计数器++上添加DOM元素

1 个答案: