CODEWITHSUNDEEP
angularjsswitch-statement
B.Balamanigandan
B.Balamanigandan

Reputation: 4875

How to write Switch Statement in angularJS Controller

How to write Switch Statement in angularJS Controller ?

My Source Code is

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td><a href="" ng-click="SwitchFuction(x.Name, x.Sno)">{{ x.Country }}</a></td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

    $scope.names = [
        { Sno: '1', Name: 'Jani', Country: 'Norway' },
        { Sno: '2', Name: 'Hege', Country: 'Sweden' },
        { Sno: '3', Name: 'Kai', Country: 'Denmark' }
    ];

    $scope.SuperFunction = function (id) {
        alert(id);
    };

    $scope.SwitchFuction = function (name, sno) {
        switch (sno) {
            case '1'
                alert("1. Selected Name: " + name );
                break;
            case '2'
                alert("2. Selected Name: " + name );
                break;
            default:

        }
    };

});
</script>

</body>
</html>

How to Write the Switch Statement within the function SwitchFuction ??? In the above Source Code contains some semantic error. Kindly assist how to write the Switch Statement?

The Error Screen :

FireFox Screen Shot

Upvotes: 18

Views: 110268

Answers (3)

DeviD
DeviD

Reputation: 31

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="customersCtrl">

    <table>
      <tr ng-repeat="x in names">
        <td>{{ x.Name }}</td>
        <td><a href="" ng-click=SwitchFuction(x.Name,$index)>{{ x.Country }}</a>
        </td>
      </tr>
    </table>

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope) {

      $scope.names = [{
        Name: 'Jani',
        Country: 'Norway'
      }, {
        Name: 'Hege',
        Country: 'Sweden'
      }, {
        Name: 'Kai',
        Country: 'Denmark'
      }];

      $scope.SuperFunction = function(id) {
        alert(id);
      };

      $scope.SwitchFuction = function(id, caseStr) {
        switch (caseStr) {
          case 0:
            alert("Selected Case Number is 0");
            break;
          case 1:
            alert("Selected Case Number is 1");
            break;
          default:
            alert("Selected Case Number is other than 0 and 1");
            break;

        }
      };

    });
  </script>

</body>

</html>

Here is the Plunker

Upvotes: 3

vpsingh016
vpsingh016

Reputation: 703

there is a syntax error in your SwitchFunction after each case : is missing correct code:

$scope.SwitchFuction = function (id, caseStr) {
        switch (caseStr) {
            case '1':
                alert("Selected Case Number is 1");
                break;
            case '2':
                alert("Selected Case Number is 2");
                break;
            default:

        }
    };

Upvotes: 38

Vivek
Vivek

Reputation: 13278

AngularJS is built on top of JavaScript and it has no different syntax for switch case than JavaScript(As long as you are using it in script). JavaScript support switch case statements with following syntax.

switch (expression) {
  case value1:
    //Statements executed when the result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the result of expression matches valueN
    [break;]
  default:
    //Statements executed when none of the values match the value of the expression
    [break;]
}

Reference

Upvotes: 3

Related Questions