AngularJS - 在計數器++上添加DOM元素

我對AngularJS頗爲陌生，並且已經閱讀了一些關於directives如何工作的文章。儘管如此，我仍然不太確定如何解決這個問題。AngularJS - 在計數器++上添加DOM元素

這裏的設置：

我有一個視圖按鈕，如下所示：

<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操作時幾乎可以做任何事情，但在實際構造指令時不知道從哪裏開始。

來源

2015-10-27 floatyourboat

如果第一個按鈕被點擊兩次，應該創建兩個div麼？或者應該只有一個按鈕創建一個div？ – null

現在將其簡化爲一個按鈕和一個輸出列表。使用'ng-repeat'和它爲數據公開的各種過濾器。一旦你開始將模塊化改爲指令。你似乎一次嘗試太多，需要熟悉角度如何工作 – charlietfl

完成此操作的一種方法是使用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。

來源

2015-10-27 20:52:16

AngularJS - 在計數器++上添加DOM元素

回答

相關問題