Highcharts将全局数据发送到角度控制器

时间:2016-07-06 21:12:34

标签: angularjs highcharts

我最近决定在网页上使用角色,但之前从未使用过它并且是网络新手,我遇到了一些问题。该页面有一些高图图表,点击一个点后触发一个带有数据表的模态。该表是使用角度控制器创建的。

最初该表为空,因为用户没有选择要填充的数据。因此,名为cases的数据开始:var cases = [];,控制器初始化为:$scope.items = cases;

这是我获取表格数据的地方:

plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function () {
                                if (this.series.name == 'Work left')
                                {
                                    cases = [];
                                    //GET THE DATA
                                    $.getJSON(uri + '/get?team=' + team + '&sprint=' + sprint + '&day=' + this.category)
                                     .done(function (data) {
                                         $.each(data, function (n, field) {
                                             n++
                                             cases.push({ "DT": field.dt, "Title": field.subject, "Type": field.type, "Est": field.est, "Product": field.Prod, "Sprint": field.Sprint, "Status": field.Status, "CreatedDate": field.cDate });
                                         });
                                     });
                                    //UPDATE THE TABLE WITH NEW DATA HERE
                                    $("#myModal").modal();//TRIGGER MODAL
                                }
                            }
                        }
                    }
                }
            }

在此高图功能中,我根据用户点击的图表获取参数:teamsprintday。然后从api调用中获取数据。

我想知道的是,是否有可能重新初始化"在触发模态之前,//UPDATE THE TABLE WITH NEW DATA HERE线处的角度控制器。我需要$scope.items = cases;,但cases会填充新数据。

基本上我使用highchart函数动态获取数据,并且我想将此数据发送到更新表的角度控制器,这样当我触发模态时,其上的表具有指定的数据。

角度表控制器:

var sortingOrder = 'CreatedDate'; //default sort
var app = angular.module("casetable", []);

app.controller('initApp', ['$scope', '$filter',
function ($scope, $filter) {
    // init
    $scope.sortingOrder = sortingOrder;
    $scope.reverse = false;
    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 9;
    $scope.pagedItems = [];
    $scope.currentPage = 0;
    $scope.items = cases;

    var searchMatch = function (haystack, needle) {
        if (!needle) {
            return true;
        }
        return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
    };

    // init the filtered items
    $scope.search = function () {
        $scope.filteredItems = $filter('filter')($scope.items, function (item) {
            for (var attr in item) {
                if (searchMatch(item[attr], $scope.query))
                    return true;
            }
            return false;
        });
        // take care of the sorting order
        if ($scope.sortingOrder !== '') {
            $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
        }
        $scope.currentPage = 0;
        // now group by pages
        $scope.groupToPages();
    };

    // show items per page
    $scope.perPage = function () {
        $scope.groupToPages();
    };

    // calculate page in place
    $scope.groupToPages = function () {
        $scope.pagedItems = [];

        for (var i = 0; i < $scope.filteredItems.length; i++) {
            if (i % $scope.itemsPerPage === 0) {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [$scope.filteredItems[i]];
            } else {
                $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
            }
        }
    };

    $scope.deleteItem = function (idx) {
        var itemToDelete = $scope.pagedItems[$scope.currentPage][idx];
        var idxInItems = $scope.items.indexOf(itemToDelete);
        $scope.items.splice(idxInItems, 1);
        $scope.search();

        return false;
    };

    $scope.range = function (start, end) {
        var ret = [];
        if (!end) {
            end = start;
            start = 0;
        }
        for (var i = start; i < end; i++) {
            ret.push(i);
        }
        return ret;
    };

    $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
        }
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.pagedItems.length - 1) {
            $scope.currentPage++;
        }
    };

    $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

    // functions have been describe process the data for display
    $scope.search();


    // change sorting order
    $scope.sort_by = function (newSortingOrder) {
        if ($scope.sortingOrder == newSortingOrder)
            $scope.reverse = !$scope.reverse;

        $scope.sortingOrder = newSortingOrder;
    };
}]);

0 个答案:

没有答案