按下拉菜单中的选定选项过滤结果

时间:2015-01-20 12:49:51

标签: angularjs

我想使用日期下拉菜单按日期过滤。日期比较工作正常,我可以使用下面的数据结构来过滤何时使用复选框。似乎无法通过下拉菜单获得此工作。

谁能看到我做错了什么?我认为这个问题在某种程度上与model有关,但我不确定我需要做些什么才能对它进行排序。

我有一组像这样的对象:

[
 {name: "1/2/2015", selected: true,  value: Date {Sun Feb 01 2015 00:00:00 GMT+0000 (GMT Standard Time)}},
 {name: "8/2/2015", selected: true,  value: Date {Sun Feb 08 2015 00:00:00 GMT+0000 (GMT Standard Time)}}
]

这是我创建html的代码:

<select ng-model="selectedFilterOption" class="dropdown-select" ng-options="cruiseDepDate.value as cruiseDepDate.name for cruiseDepDate in cruiseDepDates">
   <option value="{{cruiseDepDate.value}}">{{cruiseDepDate.name}}</option>
</select>

我的过滤器代码:

.filter('cruiseDateFilter', function(){
   return function(cruiseResults, cruiseDepDates){
     filteredResults = []

        for(var i=0; i<cruiseResults.length; i++){
            for(var j=0; j<cruiseDepDates.length; j++){
                if(cruiseResults[i].DepartureDate.toString() === cruiseDepDates[j].value.toString()){
                    filteredResults.push(cruiseResults[i])
                }
            }
        }
        return filteredResults;
   }
})

这是plunkr显示我想要实现的大致想要。我想根据下拉列表中的选定选项过滤结果。我需要选项列表来显示格式化日期,但我需要过滤另一个值,在plunkr示例中这是一个未格式化的日期字符串。

提前感谢您对此的任何帮助:)

2 个答案:

答案 0 :(得分:0)

如果我正确理解了您的问题,这是解决您问题的有效方法: http://plnkr.co/edit/FjcyfgwjbCbaKta71uYv?p=preview

app.filter('cruiseDateFilter', function(){
    return function(cruiseResults, someOtherDates){
        return cruiseResults.filter(function(item) {
            for(var i=0; i<someOtherDates.length; i++){
                if(someOtherDates[i].value.toString() === item.value.toString()) return true;
            }
            return false;
        });
    };
});

这里是html部分,其中调用过滤器: ng-options="cruiseDepDate.value as cruiseDepDate.name for cruiseDepDate in cruiseDepDates | cruiseDateFilter:otherDates"

答案 1 :(得分:0)

这里有一个单独的指令,用于解决有关选择选项的下拉问题,您可以参考以下链接。

https://angularjsbrain.wordpress.com/fast-prototyping-with-angularjs/dependency-injection-ajax-support/