CODEWITHSUNDEEP
javascripthtmlangularjs
Tarik Kdiry
Tarik Kdiry

Reputation: 57

How do I input a js variable into a filter within ng-repeat

I have this:

<div ng-repeat="i in MediaFeedItems | filter: { category: 'userSelect' }" class="mediafeed--item">

This iterates through a list and filters out based on an attribute called 'category'. The filter is being selected by the user via drop down menu and the selection is being assigned to a variable 'userSelect' in the following function:

document.getElementById('category').addEventListener("change", function() {
    if(this.value == "HR") {
        this.userSelect = "HR";
    } else if (this.value == "Managers") {
        this.userSelect = "Managers";
    } else {
        this.userSelect = "Colleagues";
    }
});

How can I call that variable within the filter?

Upvotes: 0

Views: 52

Answers (1)

Bryan Dellinger
Bryan Dellinger

Reputation: 5294

don't think you need that function just put a ng model on your select and use it for your filter

(function() {
    'use strict';
angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

   function myCtrl(){
       /* jshint validthis: true */
       var vm=this;
       vm.items = [
                   {category: 'cat1', text: 'one'},
                   {category: 'cat1', text: 'two'},
                   {category: 'cat2', text: 'three'},
                   {category: 'cat2', text: 'four'},
                   ];
   } 

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">
  <select name="singleSelect" ng-model="category">
      <option value="cat1">category 1</option>
      <option value="cat2">category 2</option>
    </select>
    <div class="row" ng-repeat="item in vm.items | filter: { category: category }">
            {{item.text }}
      </div>
    </div>
  </div>

Upvotes: 1

Related Questions