使用select，from same模型过滤表

Question

我有一个控制器和它的模型。我从这个模型生成一个表，然后通过来自这个相同模型的ng-options产生一个选择框，这个选择框由angular-ui-utils唯一过滤器过滤，只显示模型中的一个属性(睡眠、日期等)的唯一值。这似乎是有效的，我在我的select中得到了唯一的值...但是..。选择一个选项时，我希望该表会根据这个选择进行筛选，但它没有，一旦在select中选择了一个选项，所有其他选项都会消失。:(代码如下。

我让表过滤一次，方法是通过ng-repeat生成select选项，但这不能让我像这种方法那样过滤唯一值。

附言:我对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();
});

模板

<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>

已编辑:现在，一旦进行了初始选择并拟合了模型，我的选择选项就会更改。我用下面的代码将select选项放入数组中。availabelDates是我现在用来过滤结果的模型。当我选择日期时，选择选项将更改为将所选日期显示为每个字符作为单个选项，例如0、8、/、0、2、/、2、0、1、4

angular.forEach($scope.results, function(value, index){
            this.push(value.date);

}, $scope.availableDates);

Answer 1

对初始问题的回答

通过对下拉菜单使用ng-model="results"，可以在选择option时覆盖results变量

更新的问题的

在将其用作forEach的上下文之前，您需要创建$scope.availableDates (作为数组

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

}, $scope.availableDates);

此外，如果希望options部件返回所有行，则应对-- choose ..--部件使用ng-repeat。

在http://plnkr.co/edit/B6UrF9上演示