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

时间:2017-09-08 09:55:54

标签: javascript html angularjs angularjs-ng-repeat

我是棱角分明的新手。 我有这样的数组:

$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>
&#13;
&#13;
&#13;

它给我结果

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

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

4 个答案:

答案 0 :(得分:1)

尝试这个:

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

答案 1 :(得分:1)

如果要执行任何功能,只需在其中传递$ index即可调用该函数。并使用$ index从函数中提取数组中的值。

&#13;
&#13;
  <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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

如果你这样做

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>

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

答案 3 :(得分:0)

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

了解更多信息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);