Take advantage of ngRepeat

I thought I published this topic last year but I didn’t. Should have posted back in July 2014. LOL! Anyways, you just can’t stop when a programming language like AngularJS makes your coding an extremely enjoyable experience! I really love AngularJS! It’s so friggin powerful!

I needed to add a language selector on the app I’m developing so users can switch to the locale/language they prefer. AngularJS comes with $locale files and you’ll have to reference to each file to load it. I’m using lgalfasos’ Angular Dynamic Locale to dynamically change locales. Here is something I wrote quick. You can also use “track by” and update the model by making it a collection (yourModel.yourProperty[yourEachItemKeyFromNGRepeat]).

Mostly html, non-dynamic

    <div class="sidebarLocale" ng-class="{ 'slide-out' : boolChangeClass }">
        <div id="languages" style="display: block;">
            <h1>LANGUAGES</h1>
            <ul>
                <li ng-click="selectLocale('de')" ng-class="{ highLightLocale: 'de' == user.locale }"><a href=""><span>DE</span>Deutsch</a></li>
                <li ng-click="selectLocale('en')" ng-class="{ highLightLocale: 'en' == user.locale }"><a href=""><span>EN</span>English</a></li>
                <li ng-click="selectLocale('no')" ng-class="{ highLightLocale: 'no' == user.locale }"><a href=""><span>NO</span>Nynorsk</a></li>
                <li ng-click="selectLocale('es')" ng-class="{ highLightLocale: 'es' == user.locale }"><a href=""><span>ES</span>Español</a></li>
                <li ng-click="selectLocale('fr')" ng-class="{ highLightLocale: 'fr' == user.locale }"><a href=""><span>FR</span>Français</a></li>
                <li ng-click="selectLocale('it')" ng-class="{ highLightLocale: 'it' == user.locale }"><a href=""><span>IT</span>Italiano</a></li>
                <li ng-click="selectLocale('nl')" ng-class="{ highLightLocale: 'nl' == user.locale }"><a href=""><span>NL</span>Nederlands</a></li>
            </ul>
            <ul>
                <li ng-click="selectLocale('pl')" ng-class="{ highLightLocale: 'pl' == user.locale }"><a href=""><span>PL</span>Polski</a></li>
                <li ng-click="selectLocale('pt')" ng-class="{ highLightLocale: 'pt' == user.locale }"><a href=""><span>PT</span>Português</a></li>
                <li ng-click="selectLocale('br')" ng-class="{ highLightLocale: 'br' == user.locale }"><a href=""><span>BR</span>Português</a></li>
                <li ng-click="selectLocale('fi')" ng-class="{ highLightLocale: 'fi' == user.locale }"><a href=""><span>FI</span>Suomi</a></li>
                <li ng-click="selectLocale('tr')" ng-class="{ highLightLocale: 'tr' == user.locale }"><a href=""><span>TR</span>Türkçe</a></li>
                <li ng-click="selectLocale('ru')" ng-class="{ highLightLocale: 'ru' == user.locale }"><a href=""><span>RU</span>Русский</a></li>
                <li ng-click="selectLocale('cn')" ng-class="{ highLightLocale: 'cn' == user.locale }"><a href=""><span>CN</span>简体中文</a></li>
            </ul>
        </div>
    </div>

This afternoon, I decided to refactor it since it was an eyesore. Here is the new code.

Refactored code, uses ng-repeat and ng-switch

    <div class="sidebarLocale" ng-class="{ 'slide-out' : boolChangeClass }">
        <div id="languages" style="display: block;">
            <h1>LANGUAGES</h1>
            <div ng-repeat="singleCollection in availableLocales">
                <div ng-switch on="singleCollection.col">
                <ul ng-switch-when="1">
                    <li ng-repeat="language in singleCollection.languages" ng-click="selectLocale(language.locale)" ng-class="{ highLightLocale: language.locale == userData.locale }"><a href=""><span></span></a></li>
                </ul>
                <ul ng-switch-when="2">
                    <li ng-repeat="language in singleCollection.languages" ng-click="selectLocale(language.locale)" ng-class="{ highLightLocale: language.locale == userData.locale }"><a href=""><span></span></a></li>
                </ul>
                </div>
            </div>
        </div>
    </div>

$scope.availableLocales

    $scope.availableLocales = [
        {
            col : 1,
            languages: [
                { locale : 'de', language : 'Deutsch'},
                { locale : 'en', language : 'English'},
                { locale : 'no', language : 'Nynorsk'},
                { locale : 'es', language : 'Español'},
                { locale : 'fr', language : 'Français'},
                { locale : 'it', language : 'Italiano'},
                { locale : 'nl', language : 'Nederlands'}
            ]
        },
        {
            col : 2,
            languages: [
                { locale : 'ja', language : 'Japanese'},
                { locale : 'gb', language : 'Britain'},
                { locale : 'br', language : 'Português'},
                { locale : 'ar', language : 'Arabic'},
                { locale : 'tr', language : 'Türkçe'},
                { locale : 'ru', language : 'Русский'},
                { locale : 'zh', language : '简体中文'}
            ]
        }
    ];

In case you’re interested in what selectLocale does

$scope.selectLocale = function(locale) {
    // Pull profile via User factory
    $scope.user = User.getUserData();

    // Assign a new locale to the User's profile. FYI, this function uses $cookieStore
    User.storeSelectedLocale(locale);

    // Being watched by by $watch
    $rootScope.model.selectedLocale = locale;

    // for display such as highlighting, etc
    $scope.model.selectedItem = locale;
    $scope.selectionClass = "";
}

Language selector screenshot

Neil Camara