CODEWITHSUNDEEP
angularjsng-switch
Wang'l Pakhrin
Wang'l Pakhrin

Reputation: 868

ng-switch does not work as intended when trying conditional logic

I was trying to do a simple switch case according to the data that is in value.

When value is 1, it should only show accepted and so on. but , when value is either 1 or 2, it shows accepted and pending both but works fine for option 3. 

<span ng-switch on="{{x.sers_id}}">
    {{x.sers_id}}
    <i class="icon ion-ios-information-outline"></i>&nbsp;
    <div ng-switch-when="1">Accepted</div>
    <div ng-switch-when="2">Rejected</div>
    <div ng-swtich-when="3">Pending</div>
</span>

Here is what it shows in the DOM when value is 1.

<span ng-switch="" on="1" class="ng-binding">
    1
    <i class="icon ion-ios-information-outline"></i>&nbsp;
    <!-- ngSwitchWhen: 1 --><div ng-switch-when="1">Accepted</div><!-- end ngSwitchWhen: -->
    <!-- ngSwitchWhen: 2 -->
    <div ng-swtich-when="3">Pending</div>
</span>

Upvotes: 0

Views: 69

Answers (1)

Rai
Rai

Reputation: 394

You have a spelling error. Try this:

<span ng-switch on="x.sers_id">
    {{x.sers_id}}
    <i class="icon ion-ios-information-outline"></i>&nbsp;
    <div ng-switch-when="1">Accepted</div>
    <div ng-switch-when="2">Rejected</div>
    <div ng-switch-when="3">Pending</div>
</span>

Also, please note that you do not need to enclose your $scope reference variable in {{ }} within the on attribute.

Upvotes: 1

Related Questions