angularjs ng-repeat filter based on array length

Question

I was wondering, how do I put a filter a ng-repeat that will only bring back items that have colours? I was hoping to have a checkbox above the grid entitled "Show ones with colours" that would filter the list based on the count of the colours array when it was selected, and display ALL when unselected.

{
   "_id": "54d13c3f3c25d5d8123a1d62",
   "name": "Barry",
   "colours": ["239, 101, 128"]
},
{
   "_id": "54d13sfg5d5d8hgf6gg",
   "name": "John",
   "colours": []
},
{
   "_id": "34d13sfg5d5d4tt6g",
   "name": "Andrew",
   "colours": []
},
{
   "_id": "44d165d5d4t77t6g",
   "name": "Gary",
   "colours": ["25, 234, 22", "5, 100, 255"]
},

tasseKATT · Accepted Answer · 2015-02-08 20:21:40Z

11

The following would give everyone not having colours:

<div ng-repeat="item in items | filter: { colours: '!' }">

Negate it again and you get everyone having colours:

<div ng-repeat="item in items | filter: { colours: '!!' }">

Demo: http://plnkr.co/edit/oIl3ohe0TLMWcQlTPuY5?p=preview

answered Feb 8, 2015 at 20:21

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

1 Comment

Barry Gallagher Over a year ago

That's perfect, thank you. I wasn't aware of the '!' and '!!'

RoyTheBoy · Accepted Answer · 2015-02-08 20:12:17Z

2

I think you an use a controller function to test for the presence of colours so in haml/coffeescript

%tr{"ng-repeat2 => "item in list | filter: hasColour(item)"}

and hasColour is a controller function

 $scope.hasColour=  (item) ->
  item.colours.length > 0

Untested I'm afraid

answered Feb 8, 2015 at 20:12

RoyTheBoy

6581 gold badge6 silver badges15 bronze badges

1 Comment

Phil Over a year ago

The template syntax would be filter: hasColour

Collectives™ on Stack Overflow

angularjs ng-repeat filter based on array length

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related