Come suggerisce il suo nome, questa direttiva di AngularJS implementa un costrutto comune a molti linguaggi di programmazione.
Per prima cosa implementiamo un controller con le nostre opzioni:
var app = angular.module('MyApp', []);
app.controller('ChoiceCtrl', ['$scope', function($scope) {
$scope.chosenLanguage = '';
$scope.languages = ['JavaScript', 'PHP'];
}]);
Quindi usiamo ng-switch:
<body ng-app="MyApp">
<div ng-controller="ChoiceCtrl">
<p>
<select name="choice" class="form-control" ng-model="chosenLanguage" ng-options="language for language in languages">
<option value="">Choose a language</option>
</select>
</p>
<div class="switch-container" ng-switch on="chosenLanguage">
<p ng-switch-when="JavaScript">AngularJS, jQuery</p>
<p ng-switch-when="PHP">Zend Framework, Symphony</p>
<p ng-switch-default>Choose a language</p>
</div>
</div>
</body>
Quando l'utente seleziona un linguaggio viene mostrato l'elemento con il testo corrispondente. Usando un approccio tradizionale avremmo avuto:
var select = document.querySelector( "select[name=choice]" );
var container = document.querySelector( ".switch-container" );
select.addEventListener( "change", function() {
var value = this.value;
var msg = "";
switch( value ) {
case "JavaScript":
msg = "AngularJS, jQuery";
break;
case "PHP":
msg = "Zend Framework, Symphony";
break;
default:
msg = "Choose a language";
break;
}
container.innerHTML = "<p>" + msg + "</p>";
}, false);