【问题标题】:filtering objects based on their parameters, not values根据对象的参数而不是值过滤对象
【发布时间】:2014-02-17 10:25:42
【问题描述】:

我有 json 对象,这些对象使用 ng-repeat 显示在页面上。我可以搜索它们,但我还需要能够使用 select html 元素通过某个参数“过滤”它们。

为了更好地理解,假设这是我的 html 代码:

<select ng-model="selectedGroupToShow" ng-options="group.Name for group in myGroups">
    <option value="">-- choose something --</option>
</select>

假设 myGroups 的名称属性是“Group1, Group2, Group3 ...”。它们也有 indeces 和其他参数,但 Name 是我从中选择的(这是用户想要看到的)

对象是这样构建的:

{'groupID': value, 'parameter2':value, 'parameter3':value, …}
… 

现在,如果我使用 selectedGroupToShow 作为过滤器,对象将按 group.Name 过滤,这当然是正确的,但我的对象没有 group.Name 作为其中的值。他们拥有的是组 ID 号,它在参数 groupID 中作为值给出。

我只能通过 groupID 值选择吗?我仍然需要在 select 中显示 group.Name,但在参数“groupID”中搜索 group.Id 作为值?

我再次面临的问题是:

  • 过滤器搜索所有对象的值。我只需要在一个确切的参数中搜索某个值)
  • 对于搜索,您通常使用输入字段(我也在这样做),但我还需要能够对某些参数使用 select(这里的问题是从对象的名称中进行选择,但从对象的 id 中进行搜索例如)

如果我不清楚,请随时询问更多信息(我很难将我的问题转换为可以理解的问题)

【问题讨论】:

    标签: angularjs angularjs-filter


    【解决方案1】:

    有点难以 100% 理解这个问题,我希望这就是你要找的。

    <select ng-model="selectedValue" ng-options="g.groupID as g.Name for g in groups"></select>
    

    JSFiddle:http://jsfiddle.net/ADukg/4709/

    这应该为您选择 ID,但在用户进行选择时将它们标记为用户的名称。

    表格“ngOptions”对于如何使用集合/数组作为选择元素的选项是一个很好的参考。 http://docs.angularjs.org/api/ng/directive/select

    编辑: 新建 JSFiddle,按指定参数过滤组列表。 http://jsfiddle.net/ADukg/4713/

    过滤器文档:http://docs.angularjs.org/api/ng/filter/filter

    编辑#2:用户摆弄,配置为正确过滤。 http://jsfiddle.net/ADukg/4722/

    【讨论】:

    • 你完全理解了我的第二个问题;这行得通,谢谢。我的第一个也是更重要的仍然是:如何现在在某个对象参数中搜索这个 id?我不希望将过滤器应用于每个参数的所有值。仅针对一个确切的参数。你明白我的意思吗?
    • 我想我明白你的意思了。请参阅新的 JSFiddle。
    • 是的,你理解正确,但问题是我必须过滤不同的数组然后对数组进行分组。所以有两个数组,一个有groupID,另一个只有ID。查看更新的小提琴(它在这里不起作用,但它在我的代码中起作用 - 只有当我再次尝试显示所有对象时,它才会显示那些没有分配组 ID 的对象):jsfiddle.net/ADukg/4720
    • jsfiddle.net/ADukg/4721 这里更容易看到:这是被过滤的内容(请参阅选择框旁边的文本)
    • 你在哪里告诉 angular 只按 GroupId 参数过滤?
    猜你喜欢
    • 2021-03-16
    • 2018-04-07
    • 1970-01-01
    • 2019-07-22
    • 2019-05-03
    • 1970-01-01
    • 2018-12-25
    • 2020-12-03
    • 1970-01-01
    相关资源
    最近更新 更多