AngularJS：ng-include一個接一個地點擊多個元素

我是Angular的新手，在嘗試解決一個問題後，我找不到滿意的答案。AngularJS：ng-include一個接一個地點擊多個元素

我將有一個頁面上有多個按鍵，分別鏈接到一個單獨的HTML文件：

<span ng-click="include(temp1.html)"> Block 1 </span> 
<span ng-click="include(temp2.html)"> Block 2 </span> 
<span ng-click="include(temp3.html)"> Block 3 </span> 

<div ng-include="include(x)"> Content from blocks goes here </div>

我需要它的工作，如果上的按鈕點擊後，包括分配給它一個的HTML主視圖或ng-include元素，而不刪除以前添加的元素。例如如果您單擊塊1，它將其添加到主DIV，然後單擊塊2，並將其添加到塊1下。

您也可以在一個按鈕上單擊多次，並且應該添加多次。如果可能的話，應該有一個選項可以刪除以前單獨添加的每個塊。

我知道我可以用ng-show/ng-hide來實現它，但我不希望HTML代碼在代碼中保持隱藏 - 我想從主區域物理地添加/刪除它們。

來源

2014-06-13 Leszek Kasperczyk

可能會考慮使用一個指令，並使用templateUrl功能設置動態網址 – charlietfl

------- ---------的index.html

<head > 
    <script data-require="[email protected]" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body > 
    <div ng-controller="MyController"> 
    <button ng-click="include('temp1.html')">Block 1</button><i ng-click="delete('temp1.html')">DEL 1</i> 

    <button ng-click="include('temp2.html')">Block 2</button><i ng-click="delete('temp2.html')">DEL 2</i> 

    <button ng-click="include('temp3.html')">Block 3</button><i ng-click="delete('temp3.html')">DEL 3</i> 

    <div ng-repeat="template in templates"> 
     <div ng-include="template.url">Content from blocks goes here</div> 
    </div> 
    </div> 
</body> 

</html>

------- templ.html -----

<div> 
    This is template 1 
</div>

------- temp2.html -----

<div> 
    This is template 2 
</div>

- ---- TEMPL。HTML ------

<div> 
    This is template 3 
</div>

-------- ---------- JS

angular.module("app", []) 
.controller("MyController", function ($scope) { 
$scope.templates=[]; 

$scope.include = function(templateURI) { 
    var template={url:templateURI}; 
    $scope.templates.push(template); 
} 

$scope.delete= function(url){ 
    removeEntity($scope.templates,url); 
} 

var removeEntity = function(elements,url){ 
    elements.forEach(function(element,index){ 
    if(element.url===url){ 
     elements.splice(index,1); 
     removeEntity(elements,url); 
    } 
    }) 
}});

來源

2014-06-13 16:17:49 Tek

真棒，它效果很棒:)謝謝！ –

你可以在你定義了模板url的數組上使用ngRepeat。

例如（請注意，模板需要是字符串）

<span ng-click="include('temp1.html')"> Block 1 </span> 
<span ng-click="include('temp2.html')"> Block 2 </span> 
<span ng-click="include('temp3.html')"> Block 3 </span> 
<div ng-repeat="item in array"><div ng-include="item"></div></div>

而且在控制器

$scope.array = []; 
$scope.include = function(val){ 
    $scope.array.push(val); 
}

來源

2014-06-13 13:07:22 Zerot

你的看法（underestanding）NG-包括不正確

這不是如何ng-include的作品，儘管你還沒有寫腳本讓我們檢查出來，但我敢肯定，當你點擊一個按鈕時，你的ng-include會將你的新模板重新包裝到你的包裝中

提示：您可以創建一個函數，其中有一個對象，通過單擊該按鈕可以將新模板推入該對象中，並且使用ng-repeat可以正確顯示該對象，這樣您就可以甚至刪除模板。

這樣的：

你的HTML：

 <div ng-controller="MyController"> 
     <div> 
      <button ng-click="include('temp1.html')">Block 1</button> <i   ng-click="deleteSource('temp1.html')">Delete 1</i> 
     </div> 
     <div> 
      <button ng-click="include('temp2.html')">Block 2</button><i   ng-click="deleteSource('temp2.html')">Delete 2</i> 
     </div> 
     <div> 
      <button ng-click="include('temp3.html')">Block 3</button><i   ng-click="deleteSource('temp3.html')">Delete 3</i> 
     </div> 
      <div ng-repeat="template in templates"> 
      <div ng-include="template.src">Content from blocks goes here</div> 
      </div> 
     </div>

腳本：

angular.module("app", []) 
     .controller("MyController", function ($scope) { 
     $scope.templates=[{src:'template'}]; 

     $scope.include = function(templateURI) { 
      $scope.templates.push({src:templateURI}); 
     } 

     $scope.deleteSource = function(index){ 
     $scope.templates.splice(index,1); 
     } 

    });

來源

2014-06-13 13:12:42 Milad

嗨，謝謝你的答案這工作正常，雖然我有一個稍微修改版本在這裏：http://plnkr.co/edit/dDV96bXGbjPS65JeLnoF?p=preview < - 不知道如何使它多次添加一個元素？ –

我修改了你的重擊器，它工作得很好，你想要的方式 – Milad

AngularJS：ng-include一個接一個地點擊多個元素

回答

相關問題