Displaying elements within an array of strings using ng-grid?

Question

I have a some simple JSON array of strings in which I want to display on my ng-grid. For example, if I have an array that is looks like so:

arrayOfStrings: ["test", "blah", "foo"];

I want to list all elements within this array in a column in my ng-grid, but I am having trouble doing so. Here is how I tried to render the elements within the array:

{field: 'arrayOfStrings', displayName: 'Array', width:'20%',
    cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}} </span></div>'},

However, nothing shows up. If anyone knows how to display the elements within an array into a column, that would be appreciated. Thanks!

Geoff · Accepted Answer · 2014-03-14 18:28:19Z

3

I think you're asking how to display all of the items in your array within the same column. Let me know if that's not the case and I'll edit my answer. If your field contains an array of strings, ng-grid will by default display it as a string representation of the whole array:

["test", "blah", "foo"]

You can add a cellFilter on the column

{field: 'arr', displayName: 'arrayOfStrings', cellFilter: 'stringArrayFilter'}

to control how the array data is represented:

filter('stringArrayFilter', function() {
  return function(myArray) {
    return myArray.join(', ');
  };
})

See an example Plunker here.

answered Mar 14, 2014 at 18:28

Geoff

4953 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3403666 Over a year ago

Ah, so I got it kind of working, but I get an error that says the following: Can't interpolate: {{$eval('row.entity.' + col.field) |stringArrayFilter}} TypeError: Cannot call method 'join' of undefined any ideas why?

Geoff Over a year ago

Can you create a Plunker that demonstrates the behavior or post your full code? What versions of things are you using?

user3403666 Over a year ago

Yes, here is a Plunker that demonstrates the behavior of my code. As you can see here, it displays undefined, and I'm not sure why. plnkr.co/edit/Ba7hoGFhI7cWWaD3itZx?p=preview

Geoff Over a year ago

ng-grid is looking for a field within each object in the array named "test", but you don't have one. $scope.gridOptions.data should point to an array of objects with named fields, but you are giving it an array of strings. See correction here: plnkr.co/edit/TNHk4PIAy8vnDguxBLUS?p=preview

user3403666 Over a year ago

Hi Geoff, is there a way to programatically change the commented-out $scope.test to looking like the $scope.test that works for this plunkr you just posted? Thank you for answering the question and I apologize for the late upvote.

|

ken4z · Accepted Answer · 2014-03-13 16:29:25Z

-1

Make sure your html page has the attribute set

<div class="gridStyle" ng-grid="gridOptions"></div>

Then in your controller:

$scope.arrayOfStrings = ["test", "blah", "foo"];
$scope.gridOptions = {
    data:'arrayOfStrings'   
};

Get this part working, then you can begin adding in other options

edited Mar 13, 2014 at 16:29

answered Mar 11, 2014 at 0:56

ken4z

1,3901 gold badge11 silver badges18 bronze badges

2 Comments

user3403666 Over a year ago

Hm, what do you mean setting the properties of the columnDefs? Do you mean the cell Templates? I tried it with your approach and it didn't seem to work for me

ken4z Over a year ago

Sorry, I missed part of your initial question. I have fixed and simplified my answer. See if you can get that working first, then worry about customizing it further. If this doesn't work, then you may not be loading your ng-grid properly.

Collectives™ on Stack Overflow

Displaying elements within an array of strings using ng-grid?

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related