How to: Item label mapping in custom widget

Apps & Services HABPanel
1

I thought I wanted to do something quite simple but I can’t figure this one out.

I am making a widget that will show buttons for all the items in a group. As the title for these buttons I use the item labels. For certain items I use a label that I would like to transform. For that I have made a small javascript function that will transform labels based on a map I have created:

The widget code:

<div oc-lazy-load="['/static/js_mapper.js']">
  <script type="text/ng-template" id="buttons_modal">
	<ul ng-repeat="item in itemsInGroup(config.group_name) | orderBy:'label'">
	  <div ng-click="sendCmd(item.name, (itemValue(item.name)=='OFF') ? 'ON':'OFF')">{{ mapLabel(item.label) }}</div>
	</ul>
  </script>
</div>

The javascript code:

let labelMap = new Map();
labelMap.set("home","I am home");
labelMap.set("test","Test");

function mapLabel(label) {
    if (labelMap[label]) {
		return labelMap[label];
	}
	return label;
}

Problem is that it is not calling the mapping function

2

I figured it out. Had some learning to do in my angular skills.

Widget code:

<div oc-lazy-load="['/static/js_mapper.js']">
  <script type="text/ng-template" id="buttons_modal">
	<div ng-controller="LabelMapController">
		<ul ng-repeat="item in itemsInGroup(config.group_name) | orderBy:'label'">
		  <div ng-click="sendCmd(item.name, (itemValue(item.name)=='OFF') ? 'ON':'OFF')">{{ mapLabel(item.label) }}</div>
		</ul>
	</div>
  </script>
  <div class="button_full_panel" ng-click="openModal('buttons_modal', false, 'lg')">
    <div class="button_text">{{config.group_label}}</div>
  </div>
</div>

Javascript code:

(function() {
    'use strict';

    angular
        .module('app.widgets')
        .controller('LabelMapController', LabelMapController);

    LabelMapController.$inject = ['$rootScope', '$scope', 'OHService'];
    function LabelMapController($rootScope, $scope, OHService) {
		let labelMap = new Map();
		labelMap.set('home','I am home');
		
		$scope.mapLabel = function(label) { 
			if (labelMap.has(label)) {
				return labelMap.get(label);
			}
			return label;
		};
    }	
})();