CODEWITHSUNDEEP
javascriptangularjscordovatoggleionic-framework
Umer Younas
Umer Younas

Reputation: 43

Dynamically add toggle in ionic angularJS

I am trying to add dynamically toggle in ionic but it does not work. please help me.

if (maxScore==1){
angular.element(document.getElementById(objItem)).html(objItem + '<div> <ion-toggle ng-change="pushNotificationChange(this)"></ion-toggle></div></div>');   
}

Thanks in advance.

Upvotes: 3

Views: 711

Answers (2)

rohit koli
rohit koli

Reputation: 1

To Toggle (show/hide on click) using dynamic data's id in angular 6:

<div *ngFor="let item of items; let i = index" [attr.data-index]="i">
  <span (click)="tooglefunction(i)"> {{item}} </span>
  <div *ngIf="toogle==i">
    //content to be toogled
  </div>
</div>

toogle;
items = ["data1", "data2", "data3"];

tooglefunction(i) {
  if (this.toogle == i) {
    this.toogle = -1;
  } else {
    this.toogle = i;
  }
}

Upvotes: 0

aorfevre
aorfevre

Reputation: 5064

You can not add dynamicly into angularJS HTML Code just like that.

In order to make it work , you need to compile it by using dependency $compile

If you want to bypass that you just add into your HTML code your toogle code with a condition 

<div ng-if="maxScore===1"> <ion-toggle ng-change="pushNotificationChange(this)"></ion-toggle></div></div>

into your controller, just change your code that instanciate maxScore to $scope.maxScore

Upvotes: 1

Related Questions