Angular JS从数据中选择菜单,在顶部保留1个项目?

史蒂夫

我有一个ng-repeat选择菜单,其中包含世界各国,其名称和2个字母的缩写。

我从Angular文档中知道,您可以在选择菜单(https://code.angularjs.org/1.2.26/docs/api/ng/directive/selectoption之前对1个项目进行硬编码ng-repeat

因此,按预期,我将其用于空值“ Choose ...”菜单项。

其余项目来自JSON来源,在我的服务中按国家/地区代码按字母顺序排列。

现在,我的客户希望将美国放在菜单的顶部,因为它是最常被选择的(并且是英国版本,顶部是UK)。

在不重新排序JSON文件的情况下,我如何才能做到这一点?

蒂堡

您可以在Angular中使用orderBy过滤器(https://docs.angularjs.org/api/ng/filter/orderBy

由于orderBy只能与谓词函数或表达式一起使用,因此您不能编写自己的比较函数,但是可以通过返回将位于其他所有字符前面的值来强制使用美国或英国。

例如,如果每个国家/地区都有一个ID,而您拥有类似阿富汗(ID = 1),阿尔巴尼亚(ID = 2)...和美国(ID = 200)之类的谓词,则谓词可能如下所示:

$scope.predicate = function (country) {
    if (country.Name == 'United States') return -1;
    else return country.ID;
}

然后像这样在ng-repeat中使用谓词

ng-repeat="country in countries | orderBy:predicate"

之所以有效,是因为(根据文档)

该函数的结果将使用<,=,>运算符进行排序。

如果您没有ID,则可以使用通过上述比较运算符排序的任何其他属性来强制排序。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular 6 更新 *ngFor 数据,从下拉菜单中选择项目

来自分类Dev

Angular JS选择菜单项出现两次

来自分类Dev

如何让子选择菜单考虑 Angular 6+ 中主选择菜单的变化?

来自分类Dev

在Angular JS的动态下拉菜单中选择默认值

来自分类Dev

Angular.js:从列表中选择组合

来自分类Dev

angular 2+ 强制在下拉列表中选择第一个项目

来自分类Dev

允许“未定义”作为有效的选择菜单选项(在 Angular 中)?

来自分类Dev

如何在选择列表Angular JS中选择第一个元素?

来自分类Dev

您将如何创建两个选择菜单,其中选择菜单B的内容取决于选择菜单A的选择?

来自分类Dev

从html选择菜单中选择的值

来自分类Dev

从选择菜单中选择一个选项,然后将数据填充到数据库中的下一个选择菜单。找不到数据时如何显示“无可用数据”

来自分类Dev

在复选框Angular中选择所有项目

来自分类Dev

Angular:从 ng-repeat 搜索结果中选择项目

来自分类Dev

绑定值以跨2个控制器在angular js中选择

来自分类Dev

Angular JS,图像菜单

来自分类Dev

在Angular应用中选择“ Sticky”

来自分类Dev

如何从 JSON - Angular 2 中选择一个元素

来自分类Dev

使用jQuery在选择菜单中选择第一个值

来自分类Dev

如何禁用从Angular JS下拉列表中选择特定选项?

来自分类Dev

Angular 2-从对象的JSON数组中选择1个对象并将其显示给另一个Component

来自分类Dev

在使用Angular.js从API的下拉列表中选择特定数据时,如何显示相关数据?

来自分类Dev

Angular JS选择绑定

来自分类Dev

调试Angular1选择下拉菜单

来自分类Dev

从 Android 应用程序的操作栏中选择菜单选项时,将数据从一个活动传递到另一个活动

来自分类Dev

Angular 2 将数据从 1 个 html 选择多个移动到另一个

来自分类Dev

需要保留使用Angular在MVC视图中的下拉列表中选择的值

来自分类Dev

动态Angular.js菜单

来自分类Dev

从 Angular6 模板中的选择下拉列表中选择项目时使部分可见

来自分类Dev

在选择菜单中选择的特定选项上的警报或消息

Related 相关文章

  1. 1

    Angular 6 更新 *ngFor 数据,从下拉菜单中选择项目

  2. 2

    Angular JS选择菜单项出现两次

  3. 3

    如何让子选择菜单考虑 Angular 6+ 中主选择菜单的变化?

  4. 4

    在Angular JS的动态下拉菜单中选择默认值

  5. 5

    Angular.js:从列表中选择组合

  6. 6

    angular 2+ 强制在下拉列表中选择第一个项目

  7. 7

    允许“未定义”作为有效的选择菜单选项(在 Angular 中)?

  8. 8

    如何在选择列表Angular JS中选择第一个元素?

  9. 9

    您将如何创建两个选择菜单,其中选择菜单B的内容取决于选择菜单A的选择?

  10. 10

    从html选择菜单中选择的值

  11. 11

    从选择菜单中选择一个选项,然后将数据填充到数据库中的下一个选择菜单。找不到数据时如何显示“无可用数据”

  12. 12

    在复选框Angular中选择所有项目

  13. 13

    Angular:从 ng-repeat 搜索结果中选择项目

  14. 14

    绑定值以跨2个控制器在angular js中选择

  15. 15

    Angular JS,图像菜单

  16. 16

    在Angular应用中选择“ Sticky”

  17. 17

    如何从 JSON - Angular 2 中选择一个元素

  18. 18

    使用jQuery在选择菜单中选择第一个值

  19. 19

    如何禁用从Angular JS下拉列表中选择特定选项?

  20. 20

    Angular 2-从对象的JSON数组中选择1个对象并将其显示给另一个Component

  21. 21

    在使用Angular.js从API的下拉列表中选择特定数据时,如何显示相关数据?

  22. 22

    Angular JS选择绑定

  23. 23

    调试Angular1选择下拉菜单

  24. 24

    从 Android 应用程序的操作栏中选择菜单选项时,将数据从一个活动传递到另一个活动

  25. 25

    Angular 2 将数据从 1 个 html 选择多个移动到另一个

  26. 26

    需要保留使用Angular在MVC视图中的下拉列表中选择的值

  27. 27

    动态Angular.js菜单

  28. 28

    从 Angular6 模板中的选择下拉列表中选择项目时使部分可见

  29. 29

    在选择菜单中选择的特定选项上的警报或消息

热门标签

归档