AngularJS: ng-include multiple elements one after another on click

Question

I am new to Angular and trying to resolve one issue, after researching I could not find satisfying answer.

I will have multiple buttons on a page, each one linking to a separate html file:

<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>

I need it to work that if clicked on a button, it includes the html assigned to it to a main view or ng-include element, one after another, without deleting the previously added one. E.g. if you click on block 1, it adds it to main DIV, then you click on Block 2 and it's added under Block 1.

You can also click multiple times on one button and it should be added multiple times. If possible, there should be an option to remove each block previously added separately.

I know I could achieve it with ng-show/ng-hide, but I don't want the HTML blocks to remain hidden in the code - I want to add/remove them physically from the main area.

might consider using a directive and using templateUrl function to set dynamic url — charlietfl
– charlietfl, Commented Jun 13, 2014 at 13:07

Tek · Accepted Answer · 2014-06-13 16:17:49Z

-------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);
    }
  })
}});

Milad · Accepted Answer · 2014-06-13 14:48:18Z

1

Your view(underestanding) of ng-include isn't correct

this is not how ng-include works , although you haven't write your scripts for us to check out , but I'm sure , when ever you click a button , your ng-include will replcae your new template into your wrapper

HINT: you can create a function that there is a object in it , and by clicking on the button you can push() new template into that object , and with a ng-repeat you can show that object properly , this way you can even delete templates .

like this :

Your 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>

your Script :

    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);
      }

  });

edited Jun 13, 2014 at 14:48

answered Jun 13, 2014 at 13:12

Milad

28.8k11 gold badges78 silver badges91 bronze badges

2 Comments

Lekasp Over a year ago

Hi, thanks for the answerm this works fine, although I have a slightly modified version here: plnkr.co/edit/dDV96bXGbjPS65JeLnoF?p=preview <- not sure how to make it add one element multiple times?

Milad Over a year ago

I modified your plunker , and it work great , the way you want

Zerot · Accepted Answer · 2014-06-13 13:07:22Z

0

You can use a ngRepeat over an array in which you have defined the template urls.

e.g. (do note that the templates need to be strings)

<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>

And in the controller

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

answered Jun 13, 2014 at 13:07

Zerot

1962 bronze badges

Collectives™ on Stack Overflow

AngularJS: ng-include multiple elements one after another on click

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related