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

我有一个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 json angularjs forms

相关文章:

javascript - 从iPhone上的全屏Web应用启动移动浏览器

javascript - 向骨干.js model.save()添加选项

javascript - 在Framework7中的页面加载时显示/隐藏预加载器

javascript - 奇怪的jQuery UI Slider行为

javascript - 无重力的网格之间的Physijs简单碰撞

javascript - 如何在事务回调函数中传递参数

javascript - 带百分比的JQuery Ajax请求

javascript - 传播元素神奇地将功能转变为“非功能”

javascript - 排序填充关系查询任一表

javascript - 如何在owlCarousel滑块内容上添加动画