Angular JS - Filter based on number it contains

Question

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.

vikasThakur.com · Accepted Answer · 2017-09-08 10:01:58Z

1

TRY THIS :

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

answered Sep 8, 2017 at 10:01

vikasThakur.com

5785 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

priya_singh Over a year ago

I am also performing some operation like removing adding element

vikasThakur.com Over a year ago

Can You give more info about your problem ? Like where are you face difficulty in adding / removing elements ?

vikasThakur.com Over a year ago

Ok. You should consider implementing custom filter which will split the item delimited by '-' . Slice first part of it and then use that value for ordering. Hope this helps

Abhishek Parmar · Accepted Answer · 2017-09-08 12:11:41Z

1

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>

edited Sep 8, 2017 at 12:11

answered Sep 8, 2017 at 12:05

Abhishek Parmar

1451 silver badge11 bronze badges

Comments

Rakesh Chand · Accepted Answer · 2017-09-08 11:15:51Z

0

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

edited Sep 8, 2017 at 11:15

answered Sep 8, 2017 at 9:59

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

3 Comments

priya_singh Over a year ago

ya.. but I am performing some operation also like removing adding element

Rakesh Chand Over a year ago

I don't see any problem with that also. In that case give that exact code for which you're trouble

vikasThakur.com Over a year ago

Ok. You should consider implementing custom filter which will split the item delimited by '-' . Slice first part of it and then use that value for ordering. Hope this helps

priya_singh · Accepted Answer · 2017-09-13 07:09:03Z

0

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

answered Sep 13, 2017 at 7:09

priya_singh

2,4881 gold badge19 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular JS - Filter based on number it contains

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related