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

原文 标签 javascript json angularjs forms

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

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

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

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

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

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

最佳答案

您可以在Angular(https://docs.angularjs.org/api/ng/filter/orderBy)中使用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,则可以使用通过上述比较运算符排序的任何其他属性来强制排序。

相关文章:

javascript - 将PostGIS点对象转换为geoJSON以进行映射

mysql - 在Laravel中从MySQL字段插入和检索信息

java - google oauth2如何获取服务帐户的私钥

javascript - Javascript:回调中的变量范围

javascript - 使用PHP打开图片文件时阻止新会话

javascript - 调用函数setBlinkFont()时出现未捕获的Referenceerror

javascript - AngularJs针对不同路线的多种布局

javascript - 在Chrome / IE11 / Firefox中的“隐藏的空字段”中设置一个值

node.js - 为什么要使用Express而不是AngularJS?

javascript - 使用Meteor-Angular订阅参数