Angular JS - 根据它包含的数字过滤答案

【问题标题】：Angular JS - Filter based on number it containsAngular JS - 根据它包含的数字过滤
【发布时间】：2017-09-13 15:09:03
【问题描述】：

我是 Angular js 的新手。我有这样的数组：

$scope.experience_list = ['6-7','0-1','4-5','2-3','8-10','10+', 'na'];

我从 ajax 调用中得到这个数组。所以数组的值会以任意顺序出现。

我正在使用 ng-repeat 来显示这个数组

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="">
<ul ng-init="experience_list = ['6-7','0-1','4-5','2-3','8-10','10+', 'na']">
    <li ng-repeat="experience in experience_list | orderBy:'toString()' track by $index">
  <a href="javascript:void(0)"><i class="fa fa-square-o" aria-hidden="true"></i> <span ng-if="experience == 'na'">Unknown</span> <span ng-if="experience != 'na'">{{experience}} years</span></a>
</li>
</ul>
</div>

它给了我结果

0-1 years
10+ years
2-3 years
4-5 years
6-7 years
8-10 years
Unknown

但我想要：

0-1 years    
2-3 years
4-5 years
6-7 years
8-10 years
10+ years
Unknown

任何建议或帮助将不胜感激。

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

试试这个：

<li ng-repeat="experience in experience_list | orderBy:$index track by $index">

【讨论】：

我也在执行一些操作，比如删除添加元素
你能提供更多关于你的问题的信息吗？比如你在添加/删除元素时遇到了哪些困难？
好的。您应该考虑实施自定义过滤器，它将拆分由 '-' 分隔的项目。切片它的第一部分，然后使用该值进行排序。希望这会有所帮助

【解决方案2】：

如果你想执行任何函数，只需通过传入 $index 来调用该函数。并使用 $index 从函数中的数组中提取值。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="">
<ul ng-init="experience_list = ['0-1','2-3','4-5','6-7','8-10','10+', 'na']">
    <li ng-repeat="experience in experience_list">
  <a href="javascript:void(0)"><i class="fa fa-square-o" aria-hidden="true"></i> <span ng-if="experience == 'na'">Unknown</span> <span ng-if="experience != 'na'">{{experience}} years</span></a>
</li>
</ul>
</div>

【讨论】：

【解决方案3】：

如果你这样做

ng-repeat="experience in experience_list track by $index"

你得到了正确的输出

这里还有一种方法

var a = ['0-1','2-3','4-5','6-7','8-10','10+', 'na']
$scope.experience_list = a.map(function(obj){
    return{
        order : obj.split('-')[0] || obj,
        real : obj
    };
});

html

<ul>
  <li ng-repeat="experience in experience_list | orderBy:-'order'">
     <a href="javascript:void(0)"><i class="fa fa-square-o" aria-hidden="true"></i> <span ng-if="experience == 'na'">Unknown</span> <span ng-if="experience != 'na'">{{experience.real}} years</span></a>
  </li>
</ul>

在删除和推送新值时尝试使用相同的格式

【讨论】：

ya.. 但我正在执行一些操作，比如删除添加元素
我也没有看到任何问题。在这种情况下，请给出您遇到问题的确切代码
好的。您应该考虑实施自定义过滤器，它将拆分由 '-' 分隔的项目。切片它的第一部分，然后使用该值进行排序。希望这会有所帮助

【解决方案4】：

我找到了解决方案。它帮助了我。无需为其创建自定义过滤器。

更多信息Intl.Collator

只需排序，

$scope.experience_list = ['6-7','0-1','4-5','2-3','8-10','10+', 'na'];
var collator = new Intl.Collator(undefined, {numeric: true, sensitivity: 'base'});
$scope.experience_list.sort(collator.compare);

【讨论】：