Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to append div into one div using angularjs

 <div data-ng-controller="maincontrol">
   <div class="main">
   </div>
  <button data-ng-click="submit()">click</button>
 </div>

when i click on click button i want to append one div within main div . i want to append one new div (dynamically)for each and every click .also i want to find whether children div exist or not .

i will do like this in jquery

$('main').append();

i will pass div within append();

but how to do by using angular..js ?

like image 678
silvesterprabu Avatar asked Oct 29 '13 12:10

silvesterprabu


1 Answers

Using a directive could be a solution, but it's still too close to jQuery. When you play with Angular, you have to think differently.

jQuery is procedural.

1- I am finding an element in the dom

2- I am doing some stuff

3- I am adding, removing, updating elements in the dom

angular is declarative

  • You define your data

  • You define how your data should be displayed (using ng-repeat, ng-class, etc..)

then..

  • when you are playing with your data, the view is automatically updating.

If you want to play correctly with angular you should maybe do something like:

Template:

 <div class="main">
    <div ng-repeat="stuff in stuffs"><h1>{{stuff.title}}</h1> <p>{{stuff.content}}</p></div>
 </div>

Controller:

function MainCtrl() {
    $scope.stuffs = [];
    $scope.submit = function() {
       $scope.stuffs.push({title: 'Hello', content: 'world'});
    }
}
like image 106
Luc Avatar answered Sep 21 '22 22:09

Luc