<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.6/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
<!-- App -->
<link rel="stylesheet" href="styles.css" />
<script src="app.js"></script>
</head>
<body ng-controller="AppController as app">
<div class="container">
<h1 translate="Page_Heading_Label">hello</h1>
<p translate="Page_Subtitle_Label" translate-value-ajs-version="{{app.versions.ajs}}" translate-value-translate-version="{{app.versions.translate}}">subtitle</p>
<p>{{text._1}} <em><< Should not be 'Page_Heading_Label'</em></p>
<p>{{text._2}} <em><< Should not be 'Page_Heading_Label'</em></p>
<p>{{text._3}} <em><< Should not be 'Page_Heading_Label'</em></p>
<div>
Choose:
<button ng-click="app.chooseLanguage('de')" class="btn" ng-class="{'btn-primary': app.currentLanguage === 'de'}">DE</button>
<button ng-click="app.chooseLanguage('en')" class="btn" ng-class="{'btn-primary': app.currentLanguage === 'en'}">EN</button>
<span>currentLanguage=[{{app.currentLanguage}}]</span>
</div>
</div>
<div class="grid--container">
<div ui-grid='app.gridOptions' class='grid ' id='funeralListGrid' ui-grid-auto-resize='ui-grid-auto-resize'></div>
</div>
<div>
<h2>Notes:</h2>
<ol>
<li>We start with $translate.use("xx") a psuedo-internationalized resources file</li>
<li>We invoke $translate.instant("Page_Heading_Label") in the controller to simulate having the controller initialize things like ui-grid columnDefs</li>
<li>When you click DE or EN, the "after chooseLanguage" is appended to the $translate.instant call</li>
<li>$translate.instant doesnt seem to work even after the language tables have loaded!</li>
</ol>
</div>
</body>
</html>
// Code goes here
var app = angular.module('app', [
'pascalprecht.translate',
'ui.grid'
]);
app.config(['$translateProvider',
function($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: "resources.",
suffix: '.json'
})
//$translateProvider.preferredLanguage(["xx","en"]);
$translateProvider.use("xx")
}
]);
app.filter('isAlive', function ($translate) {
return function (input) {
console.log('isAlive input',input);
//if(!input) return "";
//var isAlive = input["isAlive"];
var isAlive = input;
if(isAlive) {
return $translate.instant("PageGrid_IsAlive_True")
} else {
return $translate.instant("PageGrid_IsAlive_False")
}
};
});
app.controller('AppController', function ($rootScope, $scope, $translate, $http, uiGridConstants) {
var _this = this;
// store the current used version
this.versions = {
ajs: angular.version.full,
translate: $translate.versionInfo()
};
this.text = {};
$scope.text = this.text;
this.text._1 = $translate.instant("Page_Heading_Label") + " instant";
this.currentLanguage = $translate.use();
$rootScope.$on('$translateChangeSuccess', function () {
_this.text._2 = $translate.instant("Page_Heading_Label") + " within $translateChangeSuccess"
});
retranslate_3 = function() {
$translate("Page_Heading_Label").then(function(translated) {
_this.text._3 = translated + " inside Promise"
})
}
retranslate_3();
// invoke a language change
this.chooseLanguage = function (lang) {
$translate.use(lang)
.then(function (languageId) {
_this.currentLanguage = languageId;
console.log('using %s language now', $translate.use())
_this.text._1 = $translate.instant("Page_Heading_Label")+" after chooselanguage"
_this.text._2 = $translate.instant("Page_Heading_Label")+" after chooselanguage"
retranslate_3();
});
};
console.log('uiGridConstants.ENTITY_BINDING',uiGridConstants.ENTITY_BINDING)
this.gridOptions = {
enableFiltering: true,
flatEntityAccess: true,
fastWatch: true,
columnDefs: [
{
field: "number",
displayName: "PageGridColumn_Number_Label",
headerCellFilter: "translate",
type: "number"
},
{
field: "president",
displayName: "PageGridColumn_President_Label",
headerCellFilter: "translate"
},
{
field: "birth_year",
displayName: "PageGridColumn_BirthYear_Label",
headerCellFilter: "translate",
type: "number"
},
{
field: "party",
displayName: "PageGridColumn_Party_Label",
headerCellFilter: "translate",
enableFiltering: true
},
{
displayName: "PageGridColumn_IsAlive_Label",
headerCellFilter: "translate",
field: "isAlive",
cellFilter: 'isAlive',
filter: {
term: "",
id: 'somethingUnique',
type: uiGridConstants.filter.SELECT,
selectOptions: [
{
"value": true,
"label": $translate.instant("PageGrid_IsAlive_True")
},
{
"value": true,
"label": $translate.instant("PageGrid_IsAlive_False")
}
]
}
}
]
};
$translate(["PageGrid_IsAlive_True","PageGrid_IsAlive_False"]).then(function(trans) {
console.log("translated",trans);
var selectOptions = _this.gridOptions.columnDefs[4].filter.selectOptions;
console.log('updating selectOptions after translation', selectOptions);
selectOptions[0].label = trans[0]
selectOptions[1].label = trans[1]
console.log('updating selectOptions after translation', selectOptions);
})
$http.get('https://raw.githubusercontent.com/hitch17/sample-data/master/presidents.json').then(function(resp) {
console.log(resp.data);
_this.gridOptions.data = resp.data.map(function(i) {
if(!i.death_year) {
i.isAlive = true;
} else {
i.isAlive = !(i.death_year <= 2018)
}
return i
})
console.log('_this.gridOptions.data', _this.gridOptions.data)
})
});
{
"Page_Heading_Label": "Hello!",
"Page_Subtitle_Label": "This is running Angular JS v{{ajsVersion}} and angular-translate v{{translateVersion}}!",
"Page_Browser_Label": "Your browser is: {{browser}}",
"PageGridColumn_Number_Label": "Number",
"PageGridColumn_President_Label": "President's Name",
"PageGridColumn_BirthYear_Label": "Birth Year",
"PageGridColumn_Party_Label": "Party Affiliation",
"PageGridColumn_IsAlive_Label": "Still Living?",
"PageGrid_Party_Republican": "Republican",
"PageGrid_Party_Democratic": "Democratic",
"PageGrid_Party_Whig": "Whig",
"PageGrid_IsAlive_True": "living",
"PageGrid_IsAlive_False": "deceased"
}
{
"Page_Heading_Label": "Hallo!",
"Page_Subtitle_Label": "Hier läuft gerade Angular JS v{{ajsVersion}} und angular-translate v{{translateVersion}}!",
"Page_Browser_Label": "Dein Browser ist: {{browser}}",
"PageGridColumn_Number_Label": "Nummer",
"PageGridColumn_President_Label": "Name des Präsidenten",
"PageGridColumn_BirthYear_Label": "Geburtsjahr",
"PageGridColumn_Party_Label": "Parteizugehörigkeit",
"PageGridColumn_IsAlive_Label": "Noch am Leben?",
"PageGrid_Party_Republican": "Republikanisch",
"PageGrid_Party_Democratic": "Demokratisch",
"PageGrid_Party_Whig": "Whig"
}
{
"Page_Heading_Label": "[Ħęľľő! !!! !!! !!! !!! !!! !!!]",
"Page_Subtitle_Label": "[Ŧĥįş įş řūʼnʼnįʼnģ Åʼnģūľäř ĴŜ v{{ajsVersion}} äʼnđ äʼnģūľäř-ŧřäʼnşľäŧę v{{translateVersion}}! !!! !!! !!! !!!]",
"Page_Browser_Label": "[Ÿőūř þřőŵşęř įş: {{browser}} !!! !!!]",
"PageGridColumn_Number_Label": "[Ńūmþęř !!! !!! !!! !!! !!! !!!]",
"PageGridColumn_President_Label": "[Přęşįđęʼnŧ'ş Ńämę !!! !!!]",
"PageGridColumn_BirthYear_Label": "[ßįřŧĥ Ÿęäř !!! !!!]",
"PageGridColumn_Party_Label": "[Päřŧy Ńƒįľįäŧįőʼn !!! !!!]",
"PageGridColumn_IsAlive_Label": "[Ŝŧįľľ Ŀįvįʼnģ? !!! !!!]",
"PageGrid_Party_Republican": "[Ŗępūþľįčäʼn !!! !!!]",
"PageGrid_Party_Democratic": "[Đęmőčřäŧįč !!! !!!]",
"PageGrid_Party_Whig": "[Ŵĥįģ !!! !!! !!! !!!]",
"PageGrid_IsAlive_True": "[ľįvįʼnģ !!! !!! !!! !!! !!! !!!]",
"PageGrid_IsAlive_False": "[đęčęäşęđ !!! !!! !!! !!! !!! !!! !!! !!!]"
}
.grid--container { padding: 10px; }