Add a div element dynamically in ng-repeat angularjs - html

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?

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

Answer 2

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.