AngularJS - ng-switch not working as expected

Question

I am using AngularJS with twitter bootstrap. The fiddle for my issue can be found here.

The HTML code in question here is:

<button type="button" class="btn" ng-repeat="tool in toolBar">
    <div ng-switch on="tool.action">
        <i class="icon-plus-sign" ng-switch="insert"></i>
        <i class="icon-edit" ng-switch-when="edit"></i>
        <i class="icon-trash" ng-switch-when="delete"></i>
    </div>
</button>

and the scope is:

$scope.toolBar = [
    {
        "action": "insert"
    },
    {
        "action": "edit"
    },
    {
        "action": "delete"
    }        
];

Problem is that I want the icons to be displayed only one per button but somehow the more than two icons are shown.

What am I doing wrong?

you are missing "when" on the first icon. If you fix that it will work. — Ganaraj
– Ganaraj, Commented Apr 8, 2013 at 21:02
Thanks! Could you just mention this as the answer so that I can close this question — callmekatootie
– callmekatootie, Commented Apr 8, 2013 at 21:15

Ganaraj · Accepted Answer · 2013-04-08 21:22:03Z

4

You are missing a when.

Replace your html with

<button type="button" class="btn" ng-repeat="tool in toolBar">
    <div ng-switch on="tool.action">
        <i class="icon-plus-sign" ng-switch-when="insert"></i>
        <i class="icon-edit" ng-switch-when="edit"></i>
        <i class="icon-trash" ng-switch-when="delete"></i>
    </div>
</button>

and it should work fine.

answered Apr 8, 2013 at 21:22

Ganaraj

26.8k6 gold badges68 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - ng-switch not working as expected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related