I am newbie to AngularJs. I need to create set of div blocks (given as code) on button click.
<div>
<div>Div A</div>
<div>Div B</div>
<div>Div C</div>
</div>
I have done this using hard coded divs Demo. But I just need to use ng-repeat and directives. Any help will be appreciated.
Using ng-click is the way to go for binding the click event to your button. You should not be trying to handle button clicks with a directive. The demo you have is very close to what you need. There is a working Plunk HERE, but the general guts of it follow:
<button ng-click="myFunction()">Add</button>
<div ng-repeat="item in myList">
<div>{{item.A}}</div>
<div>{{item.B}}</div>
<div>{{item.C}}</div>
</div>
$scope.myList = [];
$scope.myFunction = function(){
var myItem = {A:someValue, B:someOther, C:someThing};
$scope.myList.push(myItem);
};
The divs that hold the items could also make use of directives to change them somehow, but that is quite a bit more code. There are plenty of SO answers and Angular documentation that show you how to write directives, so I won't repeat them here.
