Question

尝试简单地将服务器数据返回到我的HTML上的ng-repeat指令，但它呈现空白<li>元素：

我的HTML：

<div class="col-md-4">
        <ul>
            <li ng-repeat="dim in settings.dimenDS">{{dim.data.name}}</li>
        </ul>
 </div>

在我的javascript控制器代码中：

 (function () {
 'use strict';
  angular.module('rage')
   .controller('GridSettingsCtrl', ['$scope', '$modalInstance',  'datacontext', 'widget', gridSettings]);

 function gridSettings($scope, $modalInstance, datacontext, widget) {

    var settings = this;

    settings.myName = "Bob Mazzo";

settings.dimenDS = getDimFromServer();
function getDimFromServer() {
        datacontext.getDimensionsFromServer().then(
        function (data) {
            return data;
        }
    );
    }

};   // end of gridSettings()    
})();

包含我的HTML的Angular-Bootstrap模式窗口的设置是：

 settingsModalOptions: {   // config popup
      templateUrl: 'app/shared/include/grid-config/widget-config-grid.html',
      controller: 'GridSettingsCtrl as settings'
 }

data对象具有以下架构：

{
"status": "SUCCESS",
"messages": [],
"data": [
    {
        "name": "Snapshot_Id",
        "type": "integer"
    },
    {
        "name": "tradeId",
        "type": "varchar"
    },
    {
        "name": "dealId",
        "type": "varchar"
    },
    {
        "name": "BookingCountry",
        "type": "varchar"
    },
    {
        "name": "BookingLocation",
        "type": "varchar"
    },
    {
        "name": "Broker",
        "type": "varchar"
    },
    {
        "name": "BuySell",
        "type": "varchar"
    },
    {
        "name": "CCY2",
        "type": "varchar"
    },
    {
        "name": "CloseOutNettingAgreementId",
        "type": "varchar"
    },
    {
        "name": "CollateralAgreementId",
        "type": "varchar"
    },
    {
        "name": "Counterparty",
        "type": "varchar"
    },
    {
        "name": "DealDate",
        "type": "timestamp"
    },
    {
        "name": "DealIssuer",
        "type": "varchar"
    },
    {
        "name": "Delta",
        "type": "float"
    }              
]
}

我会继续排查故障。在此期间，您的建议表示赞赏。

感谢，鲍勃

Answer 1

为了将settings.dimenDS数据对象正确绑定到视图，我删除了return部分中的then()并将data.data直接分配给了对象：

   settings.dimenDS = getDimFromServer();

    function getDimFromServer() {
        datacontext.getDimensionsFromServer().then(
        function (data) {
            settings.dimenDS = data.data;                
        }
    );
    }

和最终的html标记：

<div class="col-md-4">
        <ul class="dim-list" kendo-sortable k-placeholder="settings.placeholder" k-hint="settings.hint">
            <li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
        </ul>

    </div>

AngularJS ng-Repeat指令问题

1 个答案: