Dynamically set class attribute in html with ionic framework and angular js

Question

I've got two types of diagrams chart chart-line and chart chart-bar and I want to create an html tag like this

                        <canvas class="category.diagramType"
                            chart-data="category.data"
                            chart-labels="category.labels"
                            chart-legend="true"
                            chart-series="category.series"></canvas>

category is definded in the controller. But setting the class attribute dynamically doesn't work. After Exchanging category.diagramType with chart chart-bar the diagram appreas.

The Question now is: How can i get class="category.diagramType" getting to work?

---

Just for information: In my real code im using ng-repeat to iterate through a list

 angular.module('starter.controllers', []) .controller('ProfileCtrl', function ($scope, $http) { $scope.categories = [ { title: 'Zeit', id: 1, labels: ["January", "February", "March", "April", "May", "June", "July"], series: ['Series A', 'Series B'], data: [[65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90]], diagram: 'chart chart-bar' }, { title: 'G-Kräfte', id: 2, labels: ["January", "February", "March", "April", "May", "June", "July"], series: ['Series A', 'Series B'], data: [[65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90]], diagram: "chart chart-bar" }, { title: 'Unfälle', id: 3, labels: ["January", "February", "March", "April", "May", "June", "July"], series: ['Series A', 'Series B'], data: [[65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90]], diagram: "chart chart-bar" }, { title: 'Tanken', id: 4, labels: ["January", "February", "March", "April", "May", "June", "July"], series: ['Series A', 'Series B'], data: [[65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90]], diagram: "chart chart-line" }, { title: 'Lautstärke', id: 5, labels: ["January", "February", "March", "April", "May", "June", "July"], series: ['Series A', 'Series B'], data: [[65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90]], diagram: "chart chart-line" }, { title: 'Spenden', id: 6, labels: ["January", "February", "March", "April", "May", "June", "July"], series: ['Series A', 'Series B'], data: [[65, 59, 80, 81, 56, 55, 40], [28, 48, 40, 19, 86, 27, 90]], diagram: "chart chart-bar" } ]; }) 

 <ion-view view-title="Fahrerprofil"> <ion-content> <ion-list> <ion-item ng-repeat="category in categories" href="#/app/categories/{{category.id}}"> <div class="card"> <div class="item item-divider"> <div class="row"> <div class="col col-90">{{category.title}}</div> <div class="col"> <i class="icon ion-chevron-right"></i> </div> </div> </div> <div class="row"> <canvas ng-class="category.diagram" chart-data="category.data" chart-labels="category.labels" chart-legend="true" chart-series="category.series" chart-options="{showTooltips: false}"></canvas> </div> </div> </ion-item> </ion-list> </ion-content> </ion-view> 

Answer 1

You should use ng-class instead of class so change the code such this

   <canvas ng-class="category.diagramType"
                        chart-data="category.data"
                        chart-labels="category.labels"
                        chart-legend="true"
                        chart-series="category.series"></canvas>

Answer 2

If you just want two classes then you can use ng-class in the following way:

<div ng-class="{'chart chart-bar chart chart-line' : expression}">
    ....
</div>

Where you expression will be something like category.diagramType == 'chart chart-bar'

If you need this for multiple classes then follow the below style:

<div ng-class="{'class1' : expression1, 'class2' : expression2, .....}">
    ....
</div>