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);
ng-model="results"for your dropdowns you are overwriting theresultsvariable when you select anoption..