我已经使用Web API创建了MVC 4.0应用程序,它以
JSON格式返回数据(我使用NewtonSoft.Json将对象序列化为json),并尝试在ng-Grid中绑定数据.我正在接收以下格式的数据:
"[{\"Name\":\"FIRST_NAME\",\"Value\":\"FIRST_NAME\"},{\"Name\":\"CURRENT_DATE_TIME\",\"Value\":\"CURRENT_DATE_TIME\"},{\"Name\":\"CLIENTID\",\"Value\":\"CLIENTID\"},{\"Name\":\"CALLMODE\",\"Value\":\"CALLMODE\"},{\"Name\":\"new 321\",\"Value\":null}]"
当我尝试将数据分配给ng-grid时,每个字符填充在不同的行上.以下是我写的javascript:
var guidesRespApp = angular.module('guidesRespApp',['ngGrid']); //Get Data from restful API. guidesRespApp.controller('MyCtrl',function ($scope,$http) { $http.get('/api/datadictionary').success(function (thisdata) { $scope.myData = thisdata; }); $scope.filterOptions = { filterText: '',useExternalFilter: true,}; //Setting grid options $scope.gridOptions = { data: 'myData',multiSelect: true,filterOptions: { filterText: '',useExternalFilter: false },enableRowReordering: false,showGroupPanel: false,maintainColumnRatios: false,groups: [],showSelectionCheckBox: true,showFooter: true,enableColumnResize: true,enableColumnReordering: true }; // $scope.totalFilteredItemsLength = function() { // //return self.filteredRows.length; // }; });
如果手动分配如下,数据将显示在网格中:
$scope.myData = [{"Name":"FIRST_NAME","Value":"FIRST_NAME"},{"Name":"CURRENT_DATE_TIME","Value":"CURRENT_DATE_TIME"},{"Name":"CLIENTID","Value":"CLIENTID"},{"Name":"CALLMODE","Value":"CALLMODE"}];
如
http://angular-ui.github.io/ng-grid/中所述,网格中显示的数据类型为数组,该数组中的每个元素映射到正在显示的行.所以我修改了我的代码如下,它为我工作:
$http.get('http://localhost:12143/api/datadictionary').success(function (thisdata) { //Convert data to array. var myData = $.parseJSON(JSON.parse(thisdata)); $scope.myData = myData; });
甚至var myData = $.parseJSON(angular.fromJson(thisdata));也工作.只需我们首先解析数据(为此我使用JSON.parse()),然后转换为数组(为此我使用$.parseJSON()).