AngularJS Filter Object Property

Question

My code is outputting:

red
green

Using the model of $scope.selected = '123' how can I edit it to only output:

red

Here's my view:

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="item in items">
        {{item.color}}
      </li>
    </ul>
  </body>

Here's my controller:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.selected = '123';
  $scope.items = {
    '123': {
      color: 'red',
      quantity: 3
    },
    '456': {
      color: 'blue',
      quantity: 7
    }
  };
});

I tried using a filter with selected but didn't have any luck.

much better to make items an array, then can use filter and property in html based on predicate selected — charlietfl
– charlietfl, Commented Jul 15, 2015 at 16:58

charlietfl · Accepted Answer · 2015-07-15 17:10:18Z

2

By changing items to array:

 $scope.items =[ 
    {
      id:'123',
      color: 'red',
      quantity: 3
    },
     {
      id:'456',
      color: 'blue',
      quantity: 7
    }
  ];

You can use built in filter which is only available for arrays ( there was talk of object filtering also, not sure if it exists yet)

 <li ng-repeat="item in items | filter: {id:selected}">
   {{item.color}}
 </li>

In general it is better to work with array data that allows sorting, filtering, indexing etc much easier than with objects

DEMO

edited Jul 15, 2015 at 17:10

answered Jul 15, 2015 at 17:05

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

Qi Tang · Accepted Answer · 2015-07-15 17:06:55Z

1

You can create a filter for this

.filter('myFilter', function() {
            return function(obj, selected) {
                if (!selected) return obj;

                return {
                    value: obj[selected]
                }
            }
        }

here is an example

answered Jul 15, 2015 at 17:06

Qi Tang

1,2657 silver badges18 bronze badges

Comments

Mathew Berg · Accepted Answer · 2015-07-15 17:01:16Z

0

Filters will only work on arrays, and as charlietfl mentioned you should probably switch it to that. If you can't you can use this, though I highly recommend against it:

  <body ng-controller="MainCtrl">
     <ul>
      <li ng-repeat="(key, item) in items" data-ng-if="key == selected">
           {{item.color}}     
      </li>
  </ul>
  </body>

answered Jul 15, 2015 at 17:01

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Collectives™ on Stack Overflow

AngularJS Filter Object Property

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related