Question

我是angularjs和flot条形图的新手

我正在尝试根据过滤器在点击列表中显示过滤数据。

我已经创建了一个自定义指令来绘制图表和一个自定义过滤器，我使用了点击方法得到的数据但是列表没有显示。

请帮忙看看

App.directive('chart', function () {
    return {
        restrict: 'EA',
        link: function (scope, elem, attrs) {
            var chart = null,
                options = {
                    series: {
                        stack: true,
                        bars: {
                            show: true,
                            clickable: true,
                            barWidth: 0.1,
                            align: "center"
                        }
                    },
                    axisLabels: {
                        show: true
                    },

                    xaxis: {
                        axisLabel: 'Test Dates',
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelPadding: 5,
                        mode: "categories",
                        tickLength: 0
                    },
                    yaxis: {
                        axisLabel: 'Pass/Fail Count',
                        axisLabelUseCanvas: true,
                        axisLabelFontSizePixels: 12,
                        axisLabelPadding: 5

                    },
                    grid: {
                        hoverable: true,
                        clickable: true
                    }

                }
            var data = scope[attrs.ngModel];

            var getKeyByValue = function (obj, value) {
                for (var prop in obj) {
                    if (obj.hasOwnProperty(prop)) {
                        if (obj[prop] === value) return prop;
                    }
                }
            }


            scope.$watch(attrs.ngModel, function (v) {
                if (!chart) {
                    chart = $.plot(elem, v, options);
                    elem.show();
                } else {
                    chart.setData(v);
                    chart.setupGrid();
                    chart.draw();
                }
            });
            elem.bind("plotclick", function (event, pos, item) {
                if (item) {
                    scope.show = false
                    scope.plotdate = getKeyByValue(item.series.xaxis.categories, item.dataIndex);
                    switch (item.series.label) {
                        case 'Passed':
                            scope.details = scope.arr.passdetails;
                            break;
                        case 'Failed':
                            scope.details = scope.arr.faildetails;
                            break;
                            scope.$apply();
                    }
                }
                console.log('details= ', scope.details)
                console.log('Plotdate= ', scope.plotdate)
                console.log('Show= ', scope.show)


            });


        }
    }

});
App.filter('getdata', function () {

    return function (items, date) {

        var arrayToReturn = [];
        for (var i in items) {
            if (items[i].start_date == date) {
                arrayToReturn.push(items[i]);
            }
        }

        return arrayToReturn;
    };
});

Answer 1

我终于修好了。我在我的case语句块中应用了scope。$ apply（）。

我还在div之外的div中调用我的表达式来指定控制器

见js Fiddle http://jsfiddle.net/6h1gL2sh/24/

 elem.bind("plotclick", function (event, pos, item) {
            if (item) {
                scope.show=false
                scope.plotdate= getKeyByValue(item.series.xaxis.categories, item.dataIndex);
                scope.stats=item.series.label
                switch (scope.stats){
                case 'Passed':
                    scope.details = scope.arr.passdetails;
                    break;
                case 'Failed':
                    scope.details = scope.arr.faildetails;
                    break;

                }
            }
            scope.$apply();
            console.log('details= ', scope.details)
             console.log('Plotdate= ', scope.plotdate)
              console.log('Show= ',scope.show)


        });


    }
}

如何在带有angularjs的flot条形图点击事件中显示数据列表

1 个答案: