AngularJS - How to access a binding value within ng-switch

Question

Within a ng-repeat I have a ng-switch conditional. I want the value of the ng-switch argument to be a binding. However the curly-bracket binding doesn't seem to be converted into the expected generated value. I'm aware that ng-switch creates a new scope, and that is surely causing the problem. I know about a 'dot' work-around but as the values here are coming from a service via a controller query, I can't figure out how to implement it in this situation.

html

<tr ng-repeat="user in users">
    <td ng-switch on="editState"><p ng-switch-when="noEdit">{{user.username}}</p><input type="text" value="{{user.username}}" ng-switch-when="{{user.username}}"></td>
</tr>

controller.js

$scope.users = Users.query();

-edit-

this is the function that triggers the switch

$scope.editUser = function(usernameEdit) {
    $scope.editState = usernameEdit;
};

Can you explain what you are trying to do here: ng-switch-when="{{user.username}}"? Can you instead use ng-switch-default? — Mark Rajcok
– Mark Rajcok, Commented Apr 8, 2013 at 21:34
This table row is to be repeated for each user. When I press the 'edit' link next to each user i want the switch conditional to match just that username and so hide the paragraph and show the text input. If I used switch default wouldn't all the users in the list switch? — Fisu
– Fisu, Commented Apr 9, 2013 at 4:46
I've also added the function that triggers the switch argument — Fisu
– Fisu, Commented Apr 9, 2013 at 5:54

Mark Rajcok · Accepted Answer · 2013-04-09 15:05:28Z

2

A single $scope.editState won't work if you want to be able to edit multiple users at the same time. I suggest putting an edit property on each user, and use that property to control the ng-switch:

<tr ng-repeat="user in users">
   <td ng-switch on="user.edit"> 
      <span ng-switch-when="true">
         <input  type="text" value="{{user.username}}">
         <a href="" ng-click="user.edit=false">done</a>
      </span>
      <p ng-switch-default>
         <a href="" ng-click="user.edit=true">edit</a> {{user.username}}
      </p>
   </td>
</tr>

Fiddle

answered Apr 9, 2013 at 15:05

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

1 Comment

Fisu Over a year ago

Brilliant thanks for making it so clear, it seems I didn't really understand ng-switch from the angular docs

Collectives™ on Stack Overflow

AngularJS - How to access a binding value within ng-switch

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related