How to use ng-switch in angularjs

Question

I was trying to display some content using ng-switch:

<div ng-app ng-controller="ctrl" >
    <div ng-repeat="list in statusList">
      <p ng-switch on="list">
        <span ng-switch-when="incorrect"> 
        i am incorrect
        </span>
        <span ng-switch-when="stuff">
        i am  stuff
        </span>
        <span ng-switch-when="wrong">
        i am  wrong
        </span>
        <span ng-switch-default>
        Correct
        </span>
      </p>
    </div>
</div>

controller

function ctrl($scope){
    $scope.statusList=["incorrect","wrong","stuff"];
}

Getting the output like this:

i am incorrect

i am wrong

i am stuff

But I need output to display in order what I specified. i.e.

i am incorrect
i am stuff
i am wrong

How can I do this, and one important point is we should not change the order in controller.

**ng-switch-when** is executed on the base of **ng-repeat** order. so how can you guess this kind of output??. — Hardy, May 16 '15 at 10:15
Thanks for the reply @Hardy. How can I get this Output, any ideas? Please help me — stackoverflow, May 16 '15 at 11:58

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

You can create custom order by function, something like this.

<div ng-repeat="list in statusList | orderBy:myValueFunction">

You can order it alphabetically (with filter), but I would not recommend it because you will probably add new element that are not ordered alphabetically.

edited May 23 '17 at 11:51

Community

1
1

answered May 16 '15 at 08:15

Ivan Toncev

532
5
15

score 0 · Answer 2 · answered May 16 '15 at 08:24

ng-repeat iteration uses the order of your list. You can either define a custom filter to order the list as you want or use another approach:

Define a 'contains' filter, returning true if an array contains an element:

.filter('contains', [function() {
    return function(array, element) {
          return array.indexOf(element) > -1;
    }
}])

Use ng-ifs for your template (no repeat):

<div ng-if="statusList | contains : 'incorrect'">i am incorrect</div>
<div ng-if="statusList | contains : 'stuff'">i am stuff</div>
<div ng-if="statusList | contains : 'wrong'">i am wrong</div>

This way you can define whatever order you want to have.

Plunkr: http://plnkr.co/edit/yaYodJAVCVQ55KbOrf3A?p=preview

How to use ng-switch in angularjs

2 Answers2