给剑道数据源一个角度范围变量

我目前正试图用远程数据填充剑道网格。 Kendo有自己的函数来获取数据，但我想使用我创建的角厂。给剑道数据源一个角度范围变量

所以我有一个工厂，它有一个函数“getSkills”。该函数从我的api获取所有技能对象。

angular.module('MyApp').factory('Factory', function ($resource) { 
    return $resource('/api/v1/skills/', { }, 
     { 
      getSkills: { method: 'GET', isArray: true } 
     }); 
});

在我的角度SkillController中，我把这些提取技能放在一个范围变量。

$scope.skills = SkillFactory.getSkills();

我初始化剑道电网这里：

$scope.gridOptions = { 
       dataSource: { 
        data: $scope.skills, 
        schema: { 
         model: { 
          fields: { 
           ID: { type: "number" }, 
           Name: { type: "string" }, 
           CreatedBy: { type: "number" }, 
           CreatedDate: { type: "string" }, 
           EditedBy: { type: "number" }, 
           EditedDate: { type: "string" }, 
           InUse: { type: "boolean" } 
          } 
         } 
        }, 
        pageSize: 20 
       }, 
       scrollable: true, 
       sortable: true, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       selectable: true, 
       columns: [ 
        { field: "Name", title: "skillname", width: "130px" } 
       ] 
      };

大部分的时间，Ajax回调比剑道网格的初始化速度较慢。然后它将显示一个空表，因为表的数据不会绑定到角度$ scope.skills变量。

我到处搜索过，但我无法弄清楚如何在初始化中使用数据属性的自定义函数，或者如何将范围变量绑定到表。

任何帮助，将不胜感激！

来源

2013-10-10 Jason van der Zeeuw

我发现了一个更简单的解决方案：在我的情况下，$ scope.regs定义了从服务器REST服务更新的数据，使用Angular $ resource使用“AppService”公开。这个服务被定义为：

var registrationServices = angular.module('registrationServices', ['ngResource']); 

    registrationServices.factory('AppService', ['$resource', 
     function($resource) { 
      return $resource('rest/registrations'); 
    }]);

予组k自动绑定=“假”，以格网定义在HTML：使用

<div id="form-item"> 
<label for="appId" class="info">AppId:</label> 
<input id="appId" ng-model="searchAppId"> 
<button id="search" class="k-button" ng-click="doSearch()" >Search</button> 
</div> 

<div kendo-grid k-data-source="registrations" k-selectable="'row'" 
    k-pageable='{ "refresh": true, "pageSizes": true }' 
    k-columns="registrationsColumns" 
    k-sortable="true" k-groupable="true" k-filterable="true" 
    k-on-change="selectedItem = data" 
    k-auto-bind="false" > 
</div>

代替结合剑道网格数据源“数据“财产，我用”运输“与”读“定义为功能，类似的东西：

$scope.regs; 

$scope.registrations = new kendo.data.DataSource({ 
    transport: { 
     read: function(options) { 
      options.success($scope.regs); 
     } 
    }, 
    schema: { 
     model: { 
      fields: { 
       registrationId: {type: "number"}, 
       clientFullName: {type: "string"}, 
       registrationDate2: {type: "number"}, 
       registrationDate: {type: "date"} 
      } 
     } 
    }, 
    pageSize: 5, 
    serverPaging: true, 
    serverFiltering: true, 
    serverSorting: true 
}); 


$scope.registrationsColumns = [{"field": "registrationId", "title": "Id"}, 
    {"field": "clientFullName", "title": "Name"}, 
    {"field": "registrationDate", 
     "title": "Registration Date", 
     format: "{0:dd/MM/yyyy}", 
     filterable: {ui: dateFilter, extra: "false"} 
    } 
]; 
    ....

然后，当我想刷新网格中的数据，我使用Angular $资源进行回调。：

$scope.doSearch = function() { 
    $scope.regs = AppService.query({"regId": $scope.searchAppId}, function(result) { 
     $scope.registrations.read(); 
    }); 
};

它的工作原理。此解决方案的其他优点是，您不必将网格创建移动到Java Script代码，它可以保留在HTML中。

来源

2013-12-17 22:43:43

我知道这个帖子是旧的，但我注意到你有serverPaging设置为True。您如何将Kendo的网格分页数据与您的请求一起传递，或者它是否在请求正文中传递？我试图自己做这个，但保持分页工作 – samneric

我解决了这个问题做如下：

我给我的资源功能的回调是这样的：

SkillFactory.getSkills({}, 
    function success(data) { 
     createGrid(data); 
    });

在功能createGrid（数据）;我这样初始化数据：

function createGrid(gridData) { 
$("#skillGrid").kendoGrid({ 
    dataSource: { 
    data: gridData, 
    schema: { 
     model: { 
     fields: { 
       ID: { type: "number" }, 
       Name: { type: "string" }, 
       CreatedBy: { type: "number" }, 
       CreatedDate: { type: "string" }, 
       EditedBy: { type: "number" }, 
       EditedDate: { type: "string" }, 
       InUse: { type: "boolean" } 
       } 
      } 
      }, 
     pageSize: 20 
     },

所以在初始化的数据属性中，我设置了数据成功获取时的数据。我希望这有助于！

来源

2013-10-10 09:00:59

-1

你看过Angular的$ q应用吗？见$q promises in Angular

来源

2014-07-16 20:42:47

这与问题无关。 – pehaada

@pehaada，使用承诺将确保在调用网格渲染例程之前获取数据。 –

尽管您的陈述是正确的，但并不是他正在寻找的答案。你的回答就像我说的基于REST的Web服务将帮助你返回数据。 – pehaada

这样的事情会让你走上正确的道路。您可以在传输读取方法中简单地使用您的工厂。你不能混合和匹配它们，要么你们所有人都阅读，创建和销毁方法必须使用工厂，要么他们都必须显式调用终点，即url：'/ api/myservice /'而不是使用$ http就像在任何其他地方使用你的工厂一样，在你的应用程序中：

$scope.Source = new kendo.data.DataSource({ 

    transport: { 

     read: function (options) { 

      return $http.post('/api/getReportData/', {sDate: '', eDate: ''}) 
       .success(function (data) { 

        options.success(data); 
        Toaster.Info("Refreshed"); 

       }) 
       .error(function() { 
        return; 
       }); 

      console.log("mmm"); 
     } 

    } 

});

来源

2014-08-05 15:18:05 pehaada

是的，这看起来很像我最终做的！谢谢！ –

给剑道数据源一个角度范围变量

回答

相关问题