使用选择过滤表，来自同一模型

Question

我有一个控制器及其模型。我正在从这个模型生成一个表格，然后我通过 ng-options 从这个由 angular-ui-utils 唯一过滤器过滤的同一模型生成一个选择框，以仅显示来自模型中的一个属性（睡眠、日期）的唯一值等等）。这似乎有效，我在我的选择中得到了唯一的值......但是......选择一个，我希望表格会在这个选择上被过滤，但它不会，一旦在选择中选择了一个选项，所有其他选项都消失了。 :( 代码如下。

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

PS：我对 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>

已编辑：现在我的选择选项会在进行初始选择并调整模型后更改。我使用此代码将我的选择选项放入一个数组中。 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 变量

更新问题

您需要先创建您的$scope.availableDates（作为数组），然后再将其用作forEach 的上下文

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

}, $scope.availableDates);

如果您希望-- choose ..-- 部分返回所有行，您还应该使用ng-repeat 作为options。

http://plnkr.co/edit/B6UrF9的演示