Add elements dynamically in angularJS

Question

Sorry, maybe it's stupid question but i'm still learning.

I want to add some elements dynamically on a button click in my view.its working fine for me but i have some doubts.because i am learning angularJs i want to know there is any better way to do these things.

1.from documentation i understood angularJS is entirely different from jquery so in this example i used the same concept which we are used with jquery so i want to know if there is any better way to do this.

2.i can able to access dom element using $element in controller but am unable to access the same inside click event

app.controller('SalesController',function($scope,$element) {
  //here we can access like this
  $element[0].getElementsByClassName("classSub")[0];
  $scope.Change = function () {
    //we can access variables like this
    var temp= $scope.salesData
    //but this code will not work here
    $element[0].getElementsByClassName("classSub")[0];      
  }
});

3.innerHTML and append is not working with getElementsByClassName but it will work with document.querySelector

$scope.Change = function () {
  if($scope.salesData%2==0) {
    bindChart="";
    bindChart=bindChart+"<div class='sub1'></div>";    

    //these code will not add the div dynamically
    //document.getElementsByClassName("classSub"[0].innerHTML=bindChart;
    //document.getElementsByClassName("classSub")[0].append(bindChart);
    //document.querySelector( '.classSub' ).append(bindChart);

    //this will work
    document.querySelector( '.classSub' ).innerHTML=bindChart;
  } else {
    bindChart="";
    bindChart=bindChart+"<div class='sub2'></div>";
    document.querySelector( '.classSub' ).innerHTML=bindChart;
  } 
  $scope.salesData++;
}

can anyone explain what is the problem... I am a beginner in angularJS

Fiddler

Possible duplicate of How to create an element on button click? — GROX13
– GROX13, Commented Oct 26, 2016 at 11:40
You may wish to examine the parse directive. This is useful when you are altering the DOM programmatically. Not sure this is your issue. — FDavidov
– FDavidov, Commented Oct 26, 2016 at 11:45

Mistalis · Accepted Answer · 2016-10-26 12:22:17Z

0

I have UPDATED my answer from your comment:

Just declare $scope.salesData = []; in your controller, and use this code in HTML:

<div ng-repeat="sale in salesData" ng-class="{sub1: sale.n == 0, sub2: sale.n == 1}"></div>
<button type="button" ng-click="salesData.push({n:salesData.length % 2})">Click Me!</button>

When you click your button, it creates a new div according to your condition (odd or even).

Forked your fiddle here.

How it works?

$scope.salesData is an empty array.
When you click the button, it pushs an object in salesData.
This object as a value (n) switching between 0 and 1 (odd/even).
ng-repeat will create a div for each element in this array.
ng-class will style this div depending of n value (odd/even).

edited Oct 26, 2016 at 12:22

answered Oct 26, 2016 at 11:53

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

3 Comments

user3501613 Over a year ago

sorry u are mistaken,, i need to append two different div according to that condition(odd or even)

user3501613 Over a year ago

that code is working fine but i think that is not the proper way to do that thing in angularJS,,

Mistalis Over a year ago

Updated my answer :)

Collectives™ on Stack Overflow

Add elements dynamically in angularJS

1 Answer 1

I have UPDATED my answer from your comment:

How it works?

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

I have UPDATED my answer from your comment:

How it works?

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related