JSFiddle - React, Tailwind, and code Playground

by Jason Lambert

HTML

<script src="http://code.angularjs.org/1.0.8/angular.js"></script>
<div ng-controller="MyCtrl">
    <button type="button" ng-click="stuff.currentLanguage = 'de'">de</button>
    <button type="button" ng-click="stuff.currentLanguage = 'en'">en</button>
    <button type="button" ng-click="stuff.currentLanguage = 'fr'">fr</button>
    <form name="myForm">        
        <div ng-repeat="(lang, value) in model.multilingualData" 
        ng-show="lang==stuff.currentLanguage">            
            <ng-form name="innerForm">
                <div ng-class="{ 'has-error': innerForm.anything.$invalid }">
            <input type="text" name="anything" ng-model="value.someField" ng-maxlength="6"/>
                </div>
            </ng-form>
        </div>        
    </form>
    <pre>{{ model | json }}</pre>
    Form is valid? {{myForm.$valid}}
</div>

CSS

.has-error { background: red; }

JavaScript

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

function MyCtrl($scope)
{
    $scope.test = 'Hello World!';
    $scope.stuff = { currentLanguage: 'de' };
    $scope.model =
    {
        someNonMultilingualField: 12345,
        multilingualData:
        {
            'de': { someField: 'Kaffee' },
            'en': { someField: 'Coffee' },
            'fr': { someField: 'Café' }
        }
    };
}