角度ui-grid没有行

时间:2015-05-14 16:29:17

标签: angularjs angular-ui-grid

我的页面上有一个有角度的uiGrid。它将显示数据的唯一时间是我在gridOptions中设置数据而不是在http成功回调中设置数据。这是代码:

 $scope.gridOptions = {
        showfooter: false,
        enablePaging: true,
        paginationPageSizes: [15],
        paginationPageSize: 50,
        enableRowSelection: false,
        primaryKey: 'Id',
        multiSelect: false,
        enableSorting: false,
        enableVerticalScrollbar: true,
        enableHorizontalScrollbar: true,
        groupable: false,
        rowHeight: 75,
        columnDefs:
        [
            {
                field: 'Id', visible:false 
            },
            {
                field: 'Name' 

            },
            {
                field: 'CategoryName',
                DisplayName: 'Category'
            },
            {
                field: 'Actions',
                DisplayName: 'Actions',
                cellTemplate: '<a href="#" title="Edit" ng-click="goToEditInst(row)"><span class="glyphicon glyphicon-edit"></span></a>'
            }
        ]
    };

 $scope.searchInstituions = function () {
    var formObj = $scope.searchForm;
    var svc = formObj.service;
    var city = formObj.city;
    var cat = formObj.category;
    var params = { CategoryId: ((cat == null)?-1:cat.Id) , ServiceId: ((svc == null) ? -1 : svc.Id), Cityid: ((city == null) ? -1 : city.Id) };
    $http({
        method: 'POST',
        url: '/getjson',
        data: $.param(params),
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
    .success(function (data, status, headers, config) {
        data = [{ "Id": 1, "Name": "Golden Hills School District No. 75", "CategoryName": "Schools" }];
        $scope.gridOptions.data = data;
    })
    .error(function (data, status, headers, config) {
        alert('Error: ' + status + ". " + data);
    });
};

请注意,我将硬编码数据作为一个元素的数组。

这个的html是:

    <fieldset ng-controller="InstitutionController">
    <legend>Search Results:</legend>
    <div class="gridStyle" ui-grid="gridOptions"></div>
</fieldset>

在.success回调上设置$ scope.gridOptions.data时,网格不显示任何行。 (对于那些打算询问函数是否被调用的人来说,正在调用它

但我是否将其设置为网格选项,例如跟随它显示就好了:

$scope.gridOptions = {
    data: [{ "Id": 1, "Name": "Golden Hills School District No. 75", "CategoryName": "Schools" }],
    showfooter: false,
    enablePaging: true,
    paginationPageSizes: [15],
    paginationPageSize: 50,
    enableRowSelection: false,
    primaryKey: 'Id',
    multiSelect: false,
    enableSorting: false,
    enableVerticalScrollbar: true,
    enableHorizontalScrollbar: true,
    groupable: false,
    rowHeight: 75,
    columnDefs:
    [
        {
            field: 'Id', visible:false 
        },
        {
            field: 'Name' 

        },
        {
            field: 'CategoryName',
            DisplayName: 'Category'
        },
        {
            field: 'Actions',
            DisplayName: 'Actions',
            cellTemplate: '<a href="#" title="Edit" ng-click="goToEditInst(row)"><span class="glyphicon glyphicon-edit"></span></a>'
        }
    ]
};

我在这里想念的是什么!!!

1 个答案:

答案 0 :(得分:0)

固定它!!!

问题在于HTML:

<form ng-submit="searchInstituions()" ng-controller="InstitutionController">
   ....
</form>
<fieldset  ng-controller="InstitutionController">
        <legend>Search Results:</legend>
        <div class="gridStyle" ui-grid="gridOptions"></div>
</fieldset>

请注意,有两个元素form和fieldset,其属性为ng-controller。我猜两个美元范围不一样。 一旦我将上面改为以下内容,它就开始正常工作了。获得的经验:

<form ng-submit="searchInstituions()" ng-controller="InstitutionController">
   ...

    <div class="clear" style="margin-top: 50px;"></div>
    <fieldset>
        <legend>Search Results:</legend>
        <div class="gridStyle" ui-grid="gridOptions"></div>
      </fieldset>
</form>

感谢您的帮助