gpt4 book ai didi

javascript - HTML 选择元素中对象数组的多个 Angular 过滤器

转载 作者:行者123 更新时间:2023-11-30 00:19:39 25 4
gpt4 key购买 nike

我对 JS 和 AngularJS 的陡峭学习曲线还很陌生。我有许多具有以下(相关)属性的对象:

  $scope.myRecs = [{country: 'Ireland', city: 'Dublin', type: 'Food'},
{country: 'Italy', city: 'Rome', type: 'Activity'},
{country: 'Australia', city: 'Sydney', type: 'Bar/Pub'}];

我需要将数组显示如下:

<div ng-repeat="rec in myRecs"></div>

我需要能够使用三个 Ionic HTML 选择元素(每个属性一个)过滤数组,选项如下:

<select ng-model = "selectedCountry">
<option value="All"></option
<option ng-repeat="rec in myRecs | orderBy: 'country' | unique: 'country'">{{rec.country}}</option>
</select>

<select ng-model = "selectedCity">
<option value="All"></option>
<option ng-repeat="rec in myRecs | orderBy: 'city' | unique: 'city'">{{rec.city}}</option>
</select>

<select ng-model = "selectedType">
<option value="All">All</option>
<option ng-repeat="rec in myRecs | orderBy: 'type' | unique: 'type'">{{rec.type}}</option>
</select>

注意:我已经使用 Angular 过滤器库中的唯一过滤器删除了选择选项的重复项。

我需要根据在其他两个选择选项中选择的内容来过滤每个选择选项,因此我尝试为每个选择添加这样的过滤器:

<select>
<option ng-repeat="rec in myRecs | orderBy: 'type' | unique: 'type' | filter: selectedCountry && selectedCity">{{rec.type}}</option>
</select>

还有像这样的不同类型的语法:

filter: {city:selectedCity,country:selectedCountry}

filter: selectedCity || selectedCountry

filter: selectedCity | filter: selectedCountry

我无法弄清楚哪个是正确的语法或者这是否是正确的方法。

我也尝试过相同的语法来过滤显示的数组:

<div ng-repeat="rec in myRecs | filter: selectedCountry && selectedCity && selectedType"></div>

<div ng-repeat="rec in myRecs | filter: selectedCountry || selectedCity || selectedType"></div>

等...

我得到的结果很奇怪。选择一个国家然后过滤城市的 ng-repeat 选项,但是 ng-repeat 类型选项将始终为空。我觉得当涉及两个过滤器而不是三个过滤器时它可以工作,但是如果我先选择一个类型然后尝试另一个选择,那里什么也没有:/

这是尝试像这样过滤数组的正确方法还是有人可以解释更好的方法?

如果我不想让 All 选项在被选中时过滤数组,我应该给它们什么值?

谢谢!

最佳答案

你可以这样做

<select ng-model="selected.country">
<option value="">All</option>
<option ng-repeat="rec in myRecs | filter: {city: selected.city, type: selected.type}">{{rec.country}}</option>
</select>
<select ng-model = "selected.city">
<option value="">All</option>
<option ng-repeat="rec in myRecs | filter: {country: selected.country, type: selected.type} ">{{rec.city}}</option>
</select>
<select ng-model = "selected.type">
<option value="">All</option>
<option ng-repeat="rec in myRecs | filter: {country: selected.country, city: selected.city}">{{rec.type}}</option>
</select>

Working jsFiddle

注意:我删除了独特的过滤器只是为了有一个最小的工作示例。

关于javascript - HTML 选择元素中对象数组的多个 Angular 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33659066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com