Wijmo 5 (Angular) - Change Styling Based On Language

by Joel Parks

HTML

<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
    <h1>Changing Cells Based on Language</h1>
        
    <wj-flex-grid items-source="data" selection-mode="ListBox" control="flex">
        <wj-flex-grid-column header="Name" binding="name">
            <wj-flex-grid-cell-template cell-type="Cell" >
                <span class="engCSS">{{$item.name}}</span>
            </wj-flex-grid-cell-template>
        </wj-flex-grid-column>
        <wj-flex-grid-column header="التشغيل" binding="operational">
             <wj-flex-grid-cell-template cell-type="Cell" >
                <span class="arbCSS">{{$item.operational}}</span>
            </wj-flex-grid-cell-template>
        </wj-flex-grid-column>
        <wj-flex-grid-column header="ബഹുരാഷ്ട്രം" binding="multinational">
             <wj-flex-grid-cell-template cell-type="Cell" >
                <span class="malCSS">{{$item.multinational}}</span>
            </wj-flex-grid-cell-template>
        </wj-flex-grid-column>
    </wj-flex-grid>
    <button class="btn btn-default" ng-click="exportToPDF(flex)">PDF Export</button>
</div>

CSS

.engCSS{
    background:yellow;
}

.arbCSS{
    background:cyan;
}

.malCSS{
    background:red;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

		var names = 'Amazon Inc, Computer Repair Inc,Apple Inc,Local Tech Inc'.split(',');
    var operational = 'افتح,مغلق'.split(',');
    var multinational = 'ബഹുരാഷ്ട്രം,ദേശീയ'.split(',');
    var data = [];
    
    for(var i = 0; i < names.length; i++){
    		data.push({
        		name: names[i],
            operational: operational[0],
            multinational: multinational[i % 2],
        });
    }

    // create some data
    $scope.data = data;
});