Question

所以，我有更多按钮，我希望它们中的两个在点击时显示相同的内容。就我而言，旁边有一个带有传奇的图表。

<div class="rtm-demand__content">
        <div class="rtm-demand__view demand" ng-show="$ctrl.isViewSet($ctrl.views[0])">
            <div id="chart" class="demand-chart"></div>
            <div ng-if="!$ctrl.showAggregated" class="chart-legend-container">
                <div ng-repeat="site in $ctrl.legendData">
                    <chart-legend site="site" callback="$ctrl.updateLegendChart(id)"></chart-legend>
                </div>
            </div>
            <div ng-if="$ctrl.showAggregated" class="chart-legend-container">
                <chart-legend
                aggregate-legend="$ctrl.lineView.aggregatedLegend"
                callback="$ctrl.updateLegendChart(id)"></chart-legend>
            </div>
        </div>

    ...

        <div class="rtm-demand__view demand" ng-show="$ctrl.isViewSet($ctrl.views[0].subviews[0])">
            <div id="chart1" class="demand-chart"></div>
            <div ng-if="!$ctrl.showAggregated" class="chart-legend-container">
                <div ng-repeat="site in $ctrl.legendData">
                    <chart-legend site="site" callback="$ctrl.updateLegendChart(id)"></chart-legend>
                </div>
            </div>
            <div ng-if="$ctrl.showAggregated" class="chart-legend-container">
                <chart-legend
                aggregate-legend="$ctrl.lineView.aggregatedLegend"
                callback="$ctrl.updateLegendChart(id)"></chart-legend>
            </div>
        </div>

</div>

第一个按钮被创建为ng-repeat，这里使用的是第一个按钮：

<div class="btn-group btn-group-sm">
                <i ng-repeat="view in $ctrl.views"
                    class="btn yp-pulseIcon-{{view.icon}}"
                    ng-class="$ctrl.isViewSet(view) ? 'btn-primary' : 'btn-default'"
                    uib-tooltip="{{view.name}}"
                    tooltip-placement="bottom"
                    tooltip-append-to-body="true"
                    ng-click="!$ctrl.disableViews && $ctrl.setView(view)"
                    ng-disabled="$ctrl.disableViews">
                </i>
            </div>

这是第二个按钮：

<div class="btn-group btn-group-sm btn-group-comparison">
    <div "$ctrl.views[0].subviews[0]"
        class="btn yp-pulseIcon-{{$ctrl.views[0].subviews[0].icon}}"
        ng-class="$ctrl.isViewSet($ctrl.views[0].subviews[0]) ? 'btn-primary' : 'btn-default'"
        uib-tooltip="{{$ctrl.views[0].subviews[0].name}}"
        tooltip-placement="bottom"
        tooltip-append-to-body="true"
        ng-click="!$ctrl.disableViews && $ctrl.setView($ctrl.views[0].subviews[0])"
        ng-disabled="$ctrl.disableViews">
    </div>
</div>

使用函数的JS代码：

isViewSet(view) {
    return this.view === view;
}

updateState(showData = true){
    this.loading = false;
    this.hasData = showData;
    this.disableViews = !this.loading && !this.hasData;
}

setView(newView) {
    this.view = newView;
    if(newView === this.views[0]) {
        if(this.waitToLoadLineView && !this.waitForLineView) {
            this.$timeout(() => {this.updateChart();});
            this.waitToLoadLineView = false;
        }
        if (this.waitForLineView) {
            this.$timeout(() => {this.getLineChart();});
            this.waitForLineView = false;
        }
    }
}

    this.views = [
        { name: 'Line Chart', icon:'line-chart', subviews: [{ name : 'Single date range', icon:'line-chart' },
                                                            { name : 'Dual date range', icon: 'heat-map' },
                                                            { name : 'Time period overlay', icon: 'table' }]},
        { name : 'Heatmap', icon: 'heat-map', subviews: [{ name: 'Single date range', icon:'line-chart' }]},
        { name : 'Table Data', icon: 'table', subviews: [{ name: 'Single date range', icon:'line-chart' }] }
    ];

    this.lineView = {};
    this.view = this.views[0];

我把所有代码都放了，也许它更清楚了。因此，在点击按钮时会触发$ctrl.isViewSet($ctrl.views[0])和$ctrl.views[0].subviews[0]这两种情况。

在第一个的情况下，一切正常，在屏幕上加载但是对于第二个，即使我放了不同的ID chart1，也没有加载购物车，而是图例（{{ 1}}）已加载。

如果单击第二个按钮，我也不知道如何使图表显示。

有什么想法吗？

有没有办法用点击的不同按钮显示相同的内容？

0 个答案: