AngularJS $ http.get不显示数据 [英] AngularJS $http.get not displaying data

问题描述

我的数据显示，当我打电话从数据源网址：但不是当我使用$ http.get。我通过这个数据转换成使用JsonResult从我的控制器DX-图。这里是code，其中包括我的AngularJS文件和MVC视图：

AngularJS

  VAR应用= angular.module（'customCharts'，['DX']）;$ http.get（HTTP：//本地主机：53640 /主页/ PostChart）.success（功能（数据）{
    $ scope.dataSource =数据;
    $ scope.renderChart（）;
}）$ scope.renderChart =功能（）{
    $ scope.productSettings = {
        数据源：$ scope.dataSource，
        标题：显示器产品成本在我们的数据库项目，
        系列：{
            argumentField：姓名，
            valueField：成本，
            类型：酒吧，
            颜色：＃008B8B
        }，
        commonAxisSettings：{
            可见：真实，
            颜色：黑，
            宽度：2
        }，
        argumentAxis：{
            标题：在产品存储数据库项目
        }，
        valueAxis：{
            标题：美金金额，
            valueFormat：货币
        }
    }
};
 

HTML

 ＆LT; D​​IV NG-应用=customCharts＆GT;
    ＆LT; D​​IV NG控制器=ChartController＆GT;
        ＆LT; D​​IV DX-图=productSettings＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

下面是我如何解决这个问题。

  VAR应用= angular.module（'customCharts'，['DX']）;app.controller（ChartController功能（$范围，$ HTTP，$ Q）{
    $ scope.productSettings = {
        数据源：新DevEx press.data.DataSource（{
            载：函数（）{
                变种高清= $ .Deferred（）;
                $ HTTP（{
                    方法：GET，
                    网址：的http：//本地主机：80 /主页/ PostChart
                }）。成功（功能（数据）{
                    def.resolve（数据）;
                }）;
                返回def.promise（）;
            }
        }），
        系列：{
            标题：显示器产品成本在我们的数据库项目，
            argumentType：字符串，
            argumentField：姓名，
            valueField：成本，
            类型：酒吧，
            颜色：＃008B8B
        }，
        commonAxisSettings：{
            可见：真实，
            颜色：黑，
            宽度：2
        }，
        argumentAxis：{
            标题：在产品存储数据库项目
        }，
        valueAxis：{
            标题：美金金额，
            valueFormat：货币
        }
    }
}）
 

My data displays when I call URL from dataSource: but not when I use $http.get. I am passing this data into a dx-chart using a JsonResult from my controller. Here is code which includes my AngularJS file and MVC View:

AngularJS

var app = angular.module('customCharts', ['dx']);

$http.get("http://localhost:53640/Home/PostChart").success(function (data) {
    $scope.dataSource = data;
    $scope.renderChart();
})

$scope.renderChart = function () {
    $scope.productSettings = {
        dataSource: $scope.dataSource,
        title: 'Displays Product Costs for items in our Database',
        series: {
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount',
            valueFormat: 'currency'
        }
    }
};

HTML

<div ng-app="customCharts">
    <div ng-controller="ChartController">
        <div dx-chart="productSettings"></div>
    </div>
</div>

解决方案

Here is how I solved this issue.

var app = angular.module('customCharts', ['dx']);

app.controller("ChartController", function ($scope, $http, $q) {
    $scope.productSettings = {
        dataSource: new DevExpress.data.DataSource({
            load: function () {
                var def = $.Deferred();
                $http({
                    method: 'GET',
                    url: 'http://localhost:80/Home/PostChart'
                }).success(function (data) {
                    def.resolve(data);
                });
                return def.promise();
            }
        }),
        series: {
            title: 'Displays Product Costs for items in our Database',
            argumentType: String,
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount',
            valueFormat: 'currency'
        }
    }
})

这篇关于AngularJS $ http.get不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！