Angular JS - 含まれている番号に基づいてフィルタ

Question

角度の新しいjです。私は、AJAX呼び出しからこの配列を取得しています

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

： は、私のような配列を持っています。したがって配列の値は任意の順序で指定されます。

私はそれは

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

として結果を私に与えている。しかし、私が好きなこの配列を表示する

<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>

をNG-繰り返し使用しています：

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

ご意見やご協力をいただければ幸いです。

Answer 1

ちょうどこの

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> 

ただ、新しい値を削除し、プッシュするとき

Answer 2

がTHIS TRY同じ形式を使用してみてください：あなたはそれで$インデックスを渡すことで、関数を呼び出す任意の関数を実行したい場合は

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

Answer 3

を。 $ 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>

Answer 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);