JSFiddle - React, Tailwind, and code Playground

by bruscopelliti

HTML

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        <span class="sample">Number of rooms: </span>
        <select ng-model="maxRoomsAvailable">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        
        <span class="sample">Language: </span>
        <select ng-model="lang" ng-init="changeLanguage('en')" ng-change="changeLanguage(lang)">
            <option value="en">English</option>
            <option value="es">Spanish</option>
        </select>
        <div>
            <span class="sample">ng-pluralize</span><span ng-pluralize count="maxRoomsAvailable" when="{
            '1': localeMessages['obe.onlyoneleft'],
            'other': localeMessages['obe.onlyxleft'],                
            '0': localeMessages['obe.noroomsleft']    
            }"></span>
        </div>
        <div>
            <span class="sample">ng-switch</span>
            <span ng-switch on="maxRoomsAvailable">
                <span ng-switch-when="1" ng-bind="localeMessages['obe.onlyoneleft'].replace('{}', maxRoomsAvailable)"></span>
                <span ng-switch-when="0" ng-bind="localeMessages['obe.noroomsleft'].replace('{}', maxRoomsAvailable)"></span>
                <span ng-switch-default ng-bind="localeMessages['obe.onlyxleft'].replace('{}', maxRoomsAvailable)"></span>
            </span>
        </div>
        
    <ul>
        <li>Both work when 'number of rooms' changes</li>
        <li>Langage change only works with the 'ng-switch'</li>
    </ul>

CSS

span
{
    margin: 20px;
}
.sample
{
    padding: 5px;
    background-color: #F1F1F1;
}

div {
    padding: 10px;
}

JavaScript

var app = angular.module('App',[]);


function MyCtrl($scope)
{
    $scope.lang = 'en';
    $scope.maxRoomsAvailable = 3;
    
    $scope.localeMessages = {};
    $scope.messages = {};
    
    $scope.messages['en'] = {
        'obe.onlyxleft': 'Only {} rooms left',
        'obe.onlyoneleft': 'Only 1 room left',
        'obe.noroomsleft': 'No rooms left'
    }
    
    $scope.messages['es'] = {
        'obe.onlyxleft': 'Solo quedan {}',
        'obe.onlyoneleft': 'Solo queda {}',
        'obe.noroomsleft': 'No Habitaciones'
    }
    
    
    
    $scope.changeLanguage = function(lang) {
        $scope.localeMessages = $scope.messages[lang];
    }

}