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 - 在HTML页面或WordPress编辑器中突出显示不间断空格

ruby-on-rails - 如何在Ruby on Rails环境中继承Java类

javascript - 如何在ng-repeat下拉输入框中添加占位符?

javascript - 使用“ controller as”语法时,如何访问控制器中的“ this”?

javascript - 为什么/如何$()都基于jQuery?

javascript - JS如何回报居住在城市中的人口数量?

javascript - Vue.js / Webpack:当热重装它们时,如何清除旧的bundle main-*。js文件?

python - 蟒蛇。如何从JSON获取目录路径?

javascript - getJSON和Angular模型

javascript - AngularJS ngModelController基本问题