Question

这里我从数据库中获取数据，我也从Fiddler跟踪数据，但是当我试图在角度表中绑定数据时，它没有绑定

Linq查询

public JsonResult GetSalesData()
        {
            using (Ctxdb dc = new Ctxdb())
            {


                var v = (from a in dc.SalesRecords
                         group a by a.SalesDate.Year into g
                         select new
                         {
                             Year = g.Key,
                             Electronics = g.Sum(a => a.Electronics),
                             BookAndMedia = g.Sum(a => a.BookAndMedia),
                             HomeAndKitchen = g.Sum(a => a.HomeAndKitchen)
                         });
                if (v != null)
                {
                    var chartData = new object[v.Count() + 1];
                    chartData[0] = new object[]{
                "Year",
                "Electronics",
                "Book and Media",
                "Home and KitchenKFC"
            };
                    int j = 0;
                    foreach (var i in v)
                    {
                        j++;
                        chartData[j] = new object[] { i.Year.ToString(), i.Electronics, i.BookAndMedia, i.HomeAndKitchen };}
 return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}}
return new JsonResult { Data = null, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}

Fidller数据

[["Year","Electronics","Book and Media","Home and KitchenKFC"],["1947",99489,46000,26833],["1995",25555,45000,99000],["2011",1584,5685,5566],["2012",12121,1500,1200],["2014",600,5132,2730],["2015",1789,1255,1258]]

角色服务

app.service('MyGraphService', function ($http) {
    this.GetJanu = function () {
        alert('in Service')

        var Sert = $http({
            url: '/Department/GetSalesData',
            method: 'GET',
            data: JSON.stringify(),
            content:{'content-type' :'application/Json'}
        })
        return Sert;
    }
})

角度控制器

app.controller('GraphCntrls', function ($scope, MyGraphService) {
    $scope.Btnclick = function () {
        alert('in cntr')
        var tt = MyGraphService.GetJanu();
        tt.then(function (d) {
            $scope.DataGraphf = d.data;
        })
    }
})

Cshtml代码

<div>

        <div ng-controller="GraphCntrls">


            <input type="button" ng-click="Btnclick()" value="Click"  class="btn btn-success btn-sm"/>


            <table class="table table-striped table-bordered">
                <tr>
                    <th><b>Year</b></th>

                    <th><b>Electronics</b></th>
                    <th><b>Book and Media</b></th>
                    <th><b>Home and KitchenKFC</b></th>

                </tr>
                @*<tr ng-repeat="datf in DataGraphf">*@
                <tr>
                    <td>{{Year}}</td>
                    <td>{{datf.Electronics}}</td>
                    <td>{{datf.BookAndMedia}}</td>
                    <td>{{datf.HomeAndKitchen}}</td>

                </tr>
            </table>
        </div>
    </div>

Answer 1

将表格行更改为：

<tr ng-repeat="datf in DataGraphf" ng-if="!$first">
  <td>{{datf[0]}}</td>
  <td>{{datf[1]}}</td>
  <td>{{datf[2]}}</td>
  <td>{{datf[3]}}</td>
</tr>

因为您返回的是数组数组，而第一个索引是表头。您想隐藏ng-if="!$first"的第一个结果元素。然后您的后续元素是具有4个值的数组，因此您必须使用数组索引来访问属性vs obj.Name。

要使用obj.Name，您必须返回一个对象而不是一个数组，例如

{
  "Year": 1230,
  "Electronics": 123,
  "BookAndMedia" : 1234,
  "HomeAndKitche" : 515
}

响应json将是：

[{...},{...},{...}]

更新：在原始响应中有额外的tr标记，将ng-if转换为tr而不是

Answer 2

如果这是您正在运行的实际代码，则不会使用你的ng-repeat因为你已经注释掉了服务器端。

编辑：

将其更改为：

public JsonResult GetSalesData()
{
    using (Ctxdb dc = new Ctxdb())
    {


        var v = (from a in dc.SalesRecords
                 group a by a.SalesDate.Year into g
                 select new
                 {
                     Year = g.Key,
                     Electronics = g.Sum(a => a.Electronics),
                     BookAndMedia = g.Sum(a => a.BookAndMedia),
                     HomeAndKitchen = g.Sum(a => a.HomeAndKitchen)
                 });
        if (v != null)
        {
            var chartData = new object[v.Count()];
            int j = 0;
            foreach (var i in v)
            {
                j++;
                chartData[j] = new object { Year = i.Year, Electronics = i.Electronics, BookAndMedia = i.BookAndMedia, HomeAndKitchen = i.HomeAndKitchen };
            }
            return new JsonResult { Data = new {
                Fields = new string[] {"Year", "Electronics", "Books and Media", "Home and KitchenKFC"},
                Data = chartData
            } , JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }
    return new JsonResult { Data = null, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}

和你的角色代码：

<tr ng-repeat="datf in DataGraphf.Fields">
    <th>{{datf}}</th>
</tr>
<tr ng-repeat="datf in DataGraphf.Data">
    <td>{{datf.Year}}</td>
    <td>{{datf.Electronics}}</td>
    <td>{{datf.BookAndMedia}}</td>
    <td>{{datf.HomeAndKitchen}}</td>
</tr>

为什么角度不绑定ng-model中的数据

2 个答案: