Ng-Switch-6

In this example we have a switch which is used for Yes No values or On and Off values. The ng-switch directive is bind with the $scope.val variable and by default value of this variable is true, so the switch has active class and switch is on. When you click on the switch it toggles and value of the $scope.val variable becomes false and switch will off.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style>
    .active, .inactive {
        font-size: 40px;
        cursor: pointer;
    }

    .active, .inactive {
        font-size: 40px;
        cursor: pointer;
    }

    i.active {
        color: green;
    }

    i.inactive {
        color: maroon;
    }
</style>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <div class="container">
            <div class="well" ng-switch="val">
                <i class="fa fa-toggle-on active" ng-switch-when="true" ng-click="yesOrNo(val)"></i>
                <i class="fa fa-toggle-on fa-rotate-180 inactive" ng-switch-when="false" ng-click="yesOrNo(val)"></i>
            </div>
            <pre>{{val}}</pre>
        </div>
    </div>
    <script>
    var app = angular.module("switchExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.val = true;
        $scope.yesOrNo = function (val) {
            $scope.val = !val;
        }
    }]);
</script>
</body>
</html>

Output