CODEWITHSUNDEEP
angularjs
callmekatootie
callmekatootie

Reputation: 11228

AngularJS - ng-switch not working as expected

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?

Upvotes: 2

Views: 3225

Answers (1)

Ganaraj
Ganaraj

Reputation: 26841

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.

Upvotes: 4

Related Questions