CODEWITHSUNDEEP
javascripthtmlangularjsdrop-down-menu
Imalea
Imalea

Reputation: 376

Filter ng-repeat with dropdown without duplicating the dropdown options

The same way, I can manually do filter: { category : 'Popular'} in ng-repeat, I'd like to be able to do the same thing with the dropdown.

I was able to make the basics work. I have two problems: I don't want the categories to duplicate themselves in the dropdown, I'd like to be able to see everything categorized "Popular" when I select "Popular" in the dropdown.

Here is my HTML: 

<div ng-controller="SuperCtrl" class="row">
  <ul class="small-12 medium-12 columns">
    <select ng-model="find" ng-options="entry.category for entry in parsedEntries"><option value="">Select Category</option></select>.
    <li ng-repeat="entry in parsedEntries | filter: find">
      <strong>{{ entry.title }} </strong><br>
      {{ entry.description }}
   </li>
 </ul></div>

Here is the controller:

app.controller('SuperCtrl', ['$scope', '$http', function($scope,$http) {
var url = 'https://spreadsheets.google.com/feeds/list/1lZWwacSVxTD_ciOsuNsrzeMTNAl0Dj8SOrbaMqPKM7U/od6/public/values?alt=json'
var parse = function(entry) {
  var category = entry['gsx$category']['$t'];
  var description = entry['gsx$description']['$t'];
  var title = entry['gsx$title']['$t'];
  return {
    category: category,
    description: description,
    title: title
  };
}
$http.get(url)
.success(function(response) {
  var entries = response['feed']['entry'];
  $scope.parsedEntries = [];
  for (key in entries) {
    var content = entries[key];
    $scope.parsedEntries.push(parse(content));
  }
});
}]);

Upvotes: 1

Views: 2756

Answers (2)

Michel
Michel

Reputation: 28339

Got it working as you want with : 

<select ng-model="find" ng-options="entry.category as entry.category for entry in parsedEntries | unique: 'category'">

The unique filter is from angular-filter. It requires to add 'angular.filter' you to your modules dependencies: 

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

See fiddle

NB: Not a problem by itself but I took the <select> element out of the <ul> one.

Upvotes: 2

Millie Smith
Millie Smith

Reputation: 4604

Just put unique categories into in a string array called categories, sort the array, and display it with ng-options:

<select ng-model="find" ng-options="category as category for category in categories"><option value="">Select Category</option></select>.

Append this to your code after your parse function, and delete the $http.get you had. This defines a contains function and builds the array at the same time the objects come back:

function contains(a, obj) {
  for (var i = 0; i < a.length; i++) {
    if (a[i] === obj) {
      return true;
    }
  }
  return false;
};

$http.get(url)
.success(function(response) {
  var entries = response['feed']['entry'];
  $scope.parsedEntries = [];
  $scope.categories = [];
  for (key in entries) {
    var content = entries[key];
    var obj = parse(content);
    $scope.parsedEntries.push(obj);

    if (!contains($scope.categories, obj.category))
    {
      $scope.categories.push(obj.category);
    }
  }

  $scope.categories.sort();
})

Upvotes: 0

Related Questions