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-barand 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>

Ashot · Accepted Answer · 2015-11-28 19:07:37Z

0

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>

answered Nov 28, 2015 at 19:07

Ashot

1,3091 gold badge12 silver badges13 bronze badges

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

2 Comments

Markus Weber Over a year ago

that doesn't work, any idea how to find out whats the problem?

Ashot Over a year ago

also provide the code where you change category.diagramType so I can see what is the specific problem

Achu · Accepted Answer · 2015-11-28 19:56:59Z

0

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>

answered Nov 28, 2015 at 19:56

Achu

3646 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related