使用select从同一模型筛选表

Question

我有一个控制器及其模型。我从这个模型生成一个表，然后通过angular ui utils唯一过滤器过滤的同一模型的ng选项生成一个选择框，只显示模型中一个属性(睡眠、日期等)的唯一值。这似乎奏效了，我在选择中获得了独特的价值。。。。但是选择一个，我希望该表在该选择中被过滤，但它没有，一旦在选择中选择了一个选项，所有其他选项都会消失。：(代码如下。

我通过ng repeat生成选择选项，让表进行了一次筛选，但这不允许我像这种方法那样筛选唯一的值。

附言：我对棱角分明很陌生。

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

编辑：现在我的选择选项在进行初始选择并拟合模型后发生更改。我用这段代码将我的选择选项放入一个数组中。availableDates是我现在用来过滤结果的模型。当我选择一个日期时，选择选项会更改为将所选日期显示为每个字符作为单独的选项，例如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