給劍道數據源一個角度範圍變量

我目前正試圖用遠程數據填充劍道網格。 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

是的，這看起來很像我最終做的！謝謝！ –

給劍道數據源一個角度範圍變量

回答

相關問題