0

I've got a controller and its model. I'm generating a table from this model, I then produce a select box via ng-options from this same model filtered by angular-ui-utils unique filter to only show unique values from one of the properties in the model (sleep, date etc). This seems to work, I get unique values in my select.... But... selecting one, I would expect the table to be filtered on this selection but it doesn't, and once an option is selected in the select, all other options vanish. :( Code below.

I got the table to filter once, by generating the select options via ng-repeat, but that didnt allow me to filter for unique values the way this approach does.

PS: I'm pretty new to angular.

'use strict'; angular.module('DealsApp') .controller('MainCtrl', function ($scope, $http) { $scope.init = function(){ $scope.results = [ {'date' : '08/02/2014', 'resort' : 'La Plagne', 'sleeps' : '8-9', 'chalet' : 'Arnica', 'offer1' : true, 'offer2' : false, 'offer3' : false, 'offer4' : true, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '639', 'pricenow' : '249'}, {'date' : '08/02/2014', 'resort' : 'La Plagne', 'sleeps' : '8-9', 'chalet' : 'Grange', 'offer1' : false, 'offer2' : false, 'offer3' : false, 'offer4' : true, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '639', 'pricenow' : '249'}, {'date' : '09/02/2014', 'resort' : 'Tignes', 'sleeps' : '12-14', 'chalet' : 'Chartreux', 'offer1' : false, 'offer2' : false, 'offer3' : false, 'offer4' : false, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '549', 'pricenow' : '366'}, {'date' : '15/02/2014', 'resort' : 'La Plagne', 'sleeps' : '8-9', 'chalet' : 'Arnica', 'offer1' : false, 'offer2' : false, 'offer3' : false, 'offer4' : true, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '639', 'pricenow' : '249'}, {'date' : '08/02/2014', 'resort' : 'La Plagne', 'sleeps' : '10-13', 'chalet' : 'Renard', 'offer1' : true, 'offer2' : false, 'offer3' : false, 'offer4' : false, 'offer5' : false, 'offer6' : false, 'offer7' : true, 'pricewas' : '1039', 'pricenow' : '699'}, ]; }; $scope.init(); }); 

Template

<div class="row"> <div class="col-md-12"> <form class="" role="form"> <div class="form-group"> <label>Dates ng-options</label> <select name="datefilter" class="form-control" ng-model="results" ng-options="d.date for d in results | unique: 'date'"> <option value="">-- Choose a date --</option> </select> </div> <div class="form-group"> <label>Sleeps</label> <select class="form-control" ng-model="results" ng-options="s.sleeps for s in results | unique: 'sleeps'" ></select> </div> </div> </form> </div> <div class="row"> <table class="table table-striped" ng-model="results"> <tr> <th>Date</th> <th>Resort</th> <th>Sleeps</th> <th>Chalet</th> <th><small>Free Massage*</small></th> <th><small>Buy 2 get 1 Free lift Pass**</small></th> <th><small>BOGOF Ski Hire</small></th> <th><small>£10 Ski Hire</small></th> <th><small>Free Group Leader Pass</small></th> <th><small>Green Discount</small></th> <th><small>Repeat Guest Discount ***</small></th> <th>Price was</th> <th>Price now</th> </tr> <tr ng-repeat="result in results"> <td> {{ result.date | date:'medium' }} </td> <td> {{ result.resort }} </td> <td> {{ result.chalet }} </td> <td> {{ result.sleeps }} </td> <td> {{ result.offer1 }} </td> <td> {{ result.offer2 }} </td> <td> {{ result.offer3 }} </td> <td> {{ result.offer4 }} </td> <td> {{ result.offer5 }} </td> <td> {{ result.offer6 }} </td> <td> {{ result.offer7 }} </td> <td> {{ result.pricewas | currency:'£' }} </td> <td> {{ result .pricenow | currency:'£' }} </td> </tr> </table> </div> 

Edited: Now my select options change once an initial selection is made and the model is fitlered. I make my select options into an array with this code. availabelDates being the model I'm now using to filter results. When I select a date, the select options change to display the selected date as each character as individual options e.g. 0, 8, /, 0, 2, /, 2, 0, 1, 4

angular.forEach($scope.results, function(value, index){ this.push(value.date); }, $scope.availableDates); 
2
  • 1
    by using ng-model="results" for your dropdowns you are overwriting the results variable when you select an option.. Commented Feb 19, 2014 at 13:51
  • Thnaks, I got that just after I posted this. Now I have a different problem. Commented Feb 19, 2014 at 14:08

1 Answer 1

1

Answer to initial question

by using ng-model="results" for your dropdowns you are overwriting the results variable when you select an option

For updated question

You need to create your $scope.availableDates (as an array) before using it as a context to forEach

$scope.availableDates = []; angular.forEach($scope.results, function(value, index){ this.push(value.date); }, $scope.availableDates); 

Also you should use ng-repeat for the options if you want the -- choose ..-- part to return all rows..

Demo at http://plnkr.co/edit/B6UrF9

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.