Add a div element dynamically in ng-repeat angularjs

Question

I am using angularjs.I am doing ng-repeat to display list of notify types and i am display in li tag.In this list three values are default.I have one Add button next to the list.If i click add button then i need to display another list with the three default values.Again add button shifts place to next.And if i click add button again then it displays another list with default values and add button shifts place and this process goes on.

Here is the first list i am displaying with default and other values

    <div class="col-xs-12 col-sm-4 col-md-4" data-ng-
    if="workboardstages.length">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in workboardstages">
    {{workboard.stageName}} 
    </li>
    </ul>
    </div>

Here is the add button i am placing next to the list

    <div class="col-xs-12 col-sm-4 col-md-4">
    <button data-ng-click="addNew()">Add New Workboard</button>
    </div>

Here is how i am trying to display another list after clicking add button but i am not sure how to do it.

    <div class="col-xs-12 col-sm-4 col-md-4" data-ng-show="flag">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in workboardStagesWithDefault">
    {{workboard.Name}} 
    </li>
    </ul>
    </div>

Here is the Controller.js

    $scope.workboardStagesWithDefault = [
    {
        Name:"New"
    },
    {
        Name:"Won"
    },
    {
        Name:"Lost"
    }
    ];
    $scope.flag=false;

     $scope.addNew = function(){
           $scope.flag=true;
        };

    $scope.getAllWorkboardStages = function(){
    AccountSettingService.getAllWorkboardStages().then(function(response){
        $scope.workboardstages = response.data;
    });
    }

Here after clicking add button i am displaying another list with default values "New","Won" and "Lost" but if i click another time add value it is not adding list again.I want to add lists whenever i click add button.But now it is adding only once.Can anyone tell how to keep adding the div list when add is clicked?

Marcus Höglund · Accepted Answer · 2018-03-12 10:01:00Z

1

Each time you want to add a list add it to a list containing lists, $scope.listOfLists = [];. You could then use NgRepeat with the listOfLists and dynamically add more list to the view.

Here's an example:

angular.module("app",[]).controller("myCtrl",function($scope){
  $scope.listOfLists = [];
  $scope.workboardstages = [
    {
        stageName:"stageName1"
    },
    {
        stageName:"stageName2"
    },
    {
        stageName:"stageName3"
    }
  ];
  $scope.workboardStagesWithDefault = [
    {
        Name:"New"
    },
    {
        Name:"Won"
    },
    {
        Name:"Lost"
    }
    ];
    
     $scope.addNew = function(){
           var clonedList = angular.copy($scope.workboardStagesWithDefault);
           $scope.listOfLists.push(clonedList);
     };
     $scope.removeMe = function(index){
        $scope.listOfLists.splice(index,1);
     };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">

<div class="col-xs-12 col-sm-4 col-md-4" data-ng-
    if="workboardstages.length">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in workboardstages">
    {{workboard.stageName}} 
    </li>
    </ul>
    </div>
    
    <div class="col-xs-12 col-sm-4 col-md-4" data-ng-show="listOfLists.length > 0">
    <div data-ng-repeat="list in listOfLists">
    <ul class="simpleDemo row">
    <li data-ng-repeat="workboard in list">
    {{workboard.Name}} 
    </li>
    </ul>
    <button ng-click="removeMe($index)">remove {{$index}}</button>
    </div>
    
    </div>
    
    <div class="col-xs-12 col-sm-4 col-md-4">
    <button data-ng-click="addNew()">Add New Workboard</button>
    </div>

</div>

edited Mar 12, 2018 at 10:01

answered Mar 10, 2018 at 12:19

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sachin HR Over a year ago

Yeah Thank you very much.Its working.Can you tell how i can delete the new list added so that the div will be deleted

Marcus Höglund Over a year ago

@SachinHR Np! If you want to remove lists then clear the $scope.listOfLists = [];

Sachin HR Over a year ago

Consider if i add three.if i remove last one then it should delete only last one.Other two should not be deleted

Sachin HR Over a year ago

I think i have to assign one id for every list created for deleting purpose.Do you have any idea on how to create one unique id for every list created after clicking add button?or is there any way without creating id?

Sachin HR Over a year ago

Thank you very much bro.I wish i could upvote you twice :)

|

K. Palka · Accepted Answer · 2018-03-10 12:19:55Z

0

If you want to add new elements after click you should extend the list which you are iterating. In your code for example if you change your code in the following way: $scope.addNew = function(){ $scope.flag=true; $scope.workboardStagesWithDefault.push({Name:"ButtonNew"}); }; You will be adding new position ButtonNew whenever you will click Add New Workboard button.

answered Mar 10, 2018 at 12:19

K. Palka

113 bronze badges

2 Comments

Sachin HR Over a year ago

Here i didnt understand what is ButtonNew?

K. Palka Over a year ago

It is just example how to add element for ng-repeat.

Collectives™ on Stack Overflow

Add a div element dynamically in ng-repeat angularjs

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related