CODEWITHSUNDEEP
javascriptangularjstriggerswrapperng-switch
Fabic
Fabic

Reputation: 508

AngularJS ng-switch-trigger within its own ng-switch-wrapper

I am trying to switch 2 buttons which are their own switch-triggers. For better understanding:

<span ng-switch on="patientSwitch">
    <span ng-switch-when="edit">
        <button ng-click="patientSwitch='save'">save</button>
    </span>
    <span ng-switch-when="save">
        <button ng-click="patientSwitch"='edit'">edit</button>
    </span>
</span>

Here is some jsFiddle: http://jsfiddle.net/g7vKz/

Upvotes: 0

Views: 425

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

Use an object instead:

myApp.controller("PatientCtrl", function($scope) {
  $scope.viewModel = { patientSwitch: "edit" };
});

And:

<span ng-switch on="viewModel.patientSwitch">
    <span ng-switch-when="edit">
        <button ng-click="viewModel.patientSwitch='save'">save</button>
    </span>
    <span ng-switch-when="save">
         <button ng-click="viewModel.patientSwitch='edit'">edit</button>
    </span>
</span>

Demo: http://jsfiddle.net/M7EX2/

ngSwitch creates a new scope, which means unless you use an object you will get this problem due to how prototypal inheritance works in JavaScript.

Very good post on the subject can be found here.

Upvotes: 1

Related Questions