Combining ngClick with ngSwitch

I know this is a scoping issue, but I can't seem to figure it out. I want to simply change one div into another one by pressing a button. In other words, ng-click will perform the necessary changes for ng-switch to activate.

However, my buttons are both nested within their respective ng-switch-when div so I'm assuming that is the problem.

Here is a fiddle of what I'm talking about: http://jsfiddle.net/gGKGX/8/

Thank you in advance!

Answers


In Angular, ng-switch creates a new scope, which means that variables set in a ng-switch constructs aren't accessible outside of it.

In your current scenario as you have defined thingToShow in controller use $parent.thingToShow like

<button ng-click="$parent.thingToShow='two'">Switch!</button>

DEMO


You could have ngClick call a function which updates the thingToShow on the scope.

http://jsfiddle.net/gGKGX/9/

JS:

angular.module("myApp",[]).controller("MainController", function($scope) {

    $scope.thingToShow = "one";

    $scope.showThing = function (thing) {
        $scope.thingToShow = thing;        
    };
});

View:

<div  ng-controller="MainController" ng-app="myApp">
    <div ng-switch="thingToShow">
        <div ng-switch-when="one">
            Showing Thing One
            <button ng-click="showThing('two')">Switch!</button>
        </div>
        <div ng-switch-when="two">
            Showing Thing Two
            <button ng-click="showThing('one')">Switch!</button>
        </div>
    </div>
</div>

In addition to the other answers you can use an object value (since things like strings aren't passed through the isolate scope set up by the switch) http://jsfiddle.net/gGKGX/14/

// dom
<div ng-switch="thingToShow.val">
    <div ng-switch-when="one">
        Showing Thing One
        <button ng-click="thingToShow.val = 'two';">Switch!</button>
    </div>
    <div ng-switch-when="two">
        Showing Thing Two
        <button ng-click="thingToShow.val = 'one';">Switch!</button>
    </div>
</div>
// Ctrl
$scope.thingToShow = {val: "one"};

Need Your Help

Errors python2.7 or chromium when build android source tree

android python chromium

I followed the guide of google to build android source tree with fedora 19 64bit. I met the troubles at "make -j4" step with errors:

Cannot create JDBC driver of class ' ' for connect URL 'null' : I do not understand this exception

java java-ee tomcat jndi derby

Why does it say null URL and gives a empty ' ' class in the exception when i have provided the database URL ?