<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<style type="text/css">
div {height:20px;}
div span{
cursor: pointer;
border:1px solid black;
}
.short{ color: green;}
.long {color:red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<main ng-controller="AppController">
<div ng-class="{short:inputstring.length <= 5, long: inputstring.length > 5}">{{ inputstring }}</div>
<div>
<span ng-click="chngShift()"> {{view}}</span>
<span ng-click="chngLetter()">{{language}}</span>
<span ng-repeat='b in letter' ng-click="getLetter(b)"> {{b}}</span>
<span ng-click="inputstring = inputstring.slice(0,-1)" >⇐</span>
</div>
</main>
<script>
(function() {
'use strict';
angular
.module('app', [])
.controller('AppController', ['$scope', function($scope) {
var alfa ={eng:{alt:'rus',alf:'qwerty'}, rus:{alt:'eng',alf:'йцукен'}};
var shift ={up:{alt:'down',view:'String.fromCharCode(0x21D1)'},down:{alt:'up',view:'String.fromCharCode(0x21D3)'}};
$scope.view = eval(shift.up.view);
$scope.shift = shift.up.alt;
$scope.letter = alfa.eng.alf;
$scope.language =alfa.eng.alt;
$scope.inputstring = "";
$scope.getLetter = function(letter) {
$scope.inputstring += letter ;
};
$scope.chngLetter = function() {
$scope.letter = alfa[$scope.language].alf ;
$scope.language =alfa[$scope.language].alt ;
if(shift[$scope.shift].alt == 'down')
{ $scope.letter = $scope.letter.toUpperCase(); }
else
{ $scope.letter = $scope.letter.toLowerCase(); };
};
$scope.chngShift = function() {
if(shift[$scope.shift].alt == 'up')
{ $scope.letter = $scope.letter.toUpperCase(); }
else
{ $scope.letter = $scope.letter.toLowerCase(); };
$scope.view = eval(shift[$scope.shift].view);
$scope.shift = shift[$scope.shift].alt;
};
}]);
})();
</script>
</body>
</html>