CODEWITHSUNDEEP
angularjsangularjs-ng-clickangularjs-ng-include
Lekasp
Lekasp

Reputation: 223

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

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.

Upvotes: 1

Views: 5863

Answers (3)

Tek
Tek

Reputation: 1198

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

Upvotes: 2

Milad
Milad

Reputation: 28590

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

  });

Upvotes: 1

Zerot
Zerot

Reputation: 196

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

Upvotes: 0

Related Questions