CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-repeat
priya_singh
priya_singh

Reputation: 2488

Angular JS - Filter based on number it contains

I am new to angular js. I have array like:

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

I am getting this array from ajax call. So value of array will come in any order.

I am using ng-repeat to display this array

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

It is giving me result as 

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

But I want as:

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

Any suggestion or help will be appreciated.

Upvotes: 0

Views: 744

Answers (4)

priya_singh
priya_singh

Reputation: 2488

I found solution. It helped me. No need to create custom filter for it.

for more info Intl.Collator

Just sort it,

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

Upvotes: 0

Abhishek Parmar
Abhishek Parmar

Reputation: 145

if you want to perform any function just call the function by passing $index in it. And using $index extract the value from the array in the function.

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

Upvotes: 1

Rakesh Chand
Rakesh Chand

Reputation: 3113

If you just do this 

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

You're getting right output

Here's one more approach

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>

Just try to use the same format when to delete and push new values

Upvotes: 0

vikasThakur.com
vikasThakur.com

Reputation: 578

TRY THIS :

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

Upvotes: 1

Related Questions