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一个接一个地点击多个元素

回答

相关问题