TAGS :Viewed: 27 - Published at: a few seconds ago

[ Filter posts by selected option in angularjs ]

<div class="ng_wrapper"
data-ng-init="portfolios=[
{name: 'Portfolio 1', type: 'red'},
{name: 'Portfolio 2', type: 'red'},
{name: 'Portfolio 3', type: 'black'},
{name: 'Portfolio 4', type: 'black'}
]">    
    <ul>            
        <li data-ng-repeat="portfolio in portfolios | filter:type ">
        {{ portfolio.name | uppercase }} - [{{ portfolio.type | lowercase }}]
        </li>
    </ul>
<select><option>red</option><option>black</option></select>
</div>

How can I filter by 'type' with select? When I choose red, I want to display only red portfolios. How can I do that?

Thanks

Answer 1


You can add a ng-model attribute to the Drop-down and refer the same in filter of ng-repeat

<div class="ng_wrapper" data-ng-init="portfolios=[
{name: 'Portfolio 1', type: 'red'},
{name: 'Portfolio 2', type: 'red'},
{name: 'Portfolio 3', type: 'black'},
{name: 'Portfolio 4', type: 'black'}
]">
    <ul>
      <li data-ng-repeat="portfolio in portfolios | filter:portfolio_type ">
        {{ portfolio.name | uppercase }} - [{{ portfolio.type | lowercase }}]
      </li>
    </ul>
    <select ng-model="portfolio_type">
      <option>red</option>
      <option>black</option>
    </select>
  </div>

Working demo: http://plnkr.co/edit/5md1XYgNhrxWUWW8CwDc?p=preview