用ionic框架和angular js在html中动态设置class属性

Question

我有两种类型的图chart chart-line和chart chart-bar，我想创建一个类似的html标记

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

控制器中定义了CCD_ 3。但是动态设置class属性是行不通的。将CCD_ 4与CCD_。

现在的问题是：如何让class="category.diagramType"开始工作

---

仅供参考：在我的真实代码中，我使用ng-repeat迭代列表

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

您应该使用ng-class而不是class，因此更改代码，使其成为

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

Answer 2

如果您只想要两个类，那么您可以通过以下方式使用ng-class：

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

您的表达式将类似于category.diagramType == 'chart chart-bar'

如果你需要多个类，那么遵循以下风格：

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