Question

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

通过ng-repeat生成选择选项，我得到了一次过滤表，但这并不允许我按照这种方法的方式过滤唯一值。

PS：我对角度很陌生。

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

已编辑：现在，我的选择选项会在初始选择完成后更改，并且模型是适合的。我使用此代码将选择选项放入数组中。 availablebelDates是我现在用来过滤结果的模型。当我选择日期时，选择选项会更改为将所选日期显示为每个字符作为单个选项，例如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"作为下拉菜单，当您选择results

时，您将覆盖option变量

有关更新的问题

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

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

}, $scope.availableDates);

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

http://plnkr.co/edit/B6UrF9

演示

使用select从同一模型过滤表

1 个答案: