如何使用带有数组字符串的Angular ui-grid

时间:2016-08-21 05:58:22

标签: javascript angularjs arrays ui-grid

我使用Angular ui-grid来表示来自response的json对象数组。但是,我当前的用例在响应中返回一个字符串值数组。在这种情况下,应该如何配置网格?

$http.get(url)
.success(function(data) {
  if(data.length <= 0 && data != undefined) {
    $scope.noDataGridEpr="Data is not Available";
    console.log("Data is not Available");
  }
  console.log("Data is" + data);
  $scope.prList = data; 
  console.log("prList is" + $scope.prList); //an array of strings
  $scope.dataLoadedEpr=true;
  return true;
})
.error(function(data, status) {
  console.log("Error from controller. Could not query.");
  return false;
})

打印

prList is[A/DN,B/LCK,10,10,same,match,match],
[B/DN,D/LCK,10,10,same,mismatch,match],
[G/DN,D/LCK,10,10,same,mismatch,mismatch]

以下是我当前网格配置的外观

$scope.prGrid = { 
data: 'prList',
columnDefs: [
{field: 'DPin', displayName: 'DPin', width: "5%"},
{field: 'CPin', displayName: 'CPin', width: "5%"},
{field: 'slack1', displayName: 'slack1', width: "5%"},
{field: 'slack2', displayName: 'slack2', width: "5%"},
{field: 'cComp', displayName: 'cComp', width: "10%"},
{field: 'dComp', displayName: 'dComp', width: "5%"},
{field: 'gComp', displayName: 'dComp', width: "5%"}
 enableFiltering: true,
  multiSelect: false,
  enableGridMenu: true,
  enableRowHeaderSelection: false, 
  enableSorting: true,
  enableColumnResizing: true
};

我理解上面的字段配置不正确。鉴于我有一个字符串数组作为i / p,有人可以指导我如何设置网格中的字符串数组,每个代表一行?

感谢。

2 个答案:

答案 0 :(得分:1)

按照此 - &gt; the silver searcher

实施例:binding to 2D array

app.controller('TwoDimensionCtrl', ['$scope','$timeout','uiGridConstants', function ($scope,$timeout,uiGridConstants) {
  $scope.data=[
              ["Cox", "Carney", "Enormo", true],
              ["Lorraine", "Carney", "Comveyer", false],
              ["Nancy", "Waters", "Fuelton", false]
            ];

  $scope.gridOptions = {
          enableSorting: true,
          columnDefs: [
            { name: "firstName", field: "0" },
            { name: "lastName", field: "1" },
            { name: "company", field: "2" },
            { name: "employed", field: "3" }
          ],
          data : $scope.data
        };
  $timeout(function () {
    $scope.data[0][0]="TestMod";
  },5000);

}]);

答案 1 :(得分:0)

遵循此 - &gt; I need to display an array of strings within ui-grid. Single column, one string per row

试图创建/设置ui-grid消耗的json对象。这有效。

$scope.prList = convertArrayOfStringsToGridFriendlyJSON(data);

function convertArrayOfStringsToGridFriendlyJSON(arr) {
var out = [];
arr.forEach(function(entry){
entry = entry.replace('[' , '')
entry = entry.replace(']' , '')
entry = entry.split(',')

var obj = {}; //json object        
var DPin= "DPin"; //keys
var CPin= "CPin"; 
obj[DPin] = entry[0];
obj[CPin] = entry[1];
out.push(obj);
});
return out;
};