CODEWITHSUNDEEP
angularjs
Fisu
Fisu

Reputation: 3324

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

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;
};

Upvotes: 0

Views: 3463

Answers (1)

Mark Rajcok
Mark Rajcok

Reputation: 364707

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

Upvotes: 2

Related Questions