giovedì 11 giugno 2015

How set dynamically the background color in a TR element with AngularJS.

AngularJS v. 1.2.14, Bootstrap v3.3.4

In my application, I have a html page where I’d like to evidence with different background colors some rows based on “Thread affinity“ value: 1, 11, 12, …

First in my controller I have defined these functions:

function ContextsController($scope, $log, $location) {
      
var vm = this;
vm.getColor = GetColor;
function GetColor(affinity) {
if (affinity !== undefined) {
var g = 255 - (affinity * 10);
              var b = affinity * 10;

              if (g <= 0 || b > 255) {
                     return null;
              } else {
                     var color = rgbToHex(255, g, b);
                    return color;
              }                         
}
return null;
}

function componentToHex(c) {
var hex = c.toString(16);
       return hex.length === 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
       return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
})();

Then in the html page I have added this code

<tr ng-repeat="context in vm.results.contexts"
ng-style="{'background-color': vm.getColor(context.ThreadAffinity)}">
       <td>{{context.IDContext}}</td>
       <td class="text-center">{{context.ThreadAffinity}}</td>
<td>
<div class="col-md-offset-6">
<span class="glyphicon glyphicon-check" aria-hidden="true" ng-show="context.Enabled==1"></span>
                    <span class="glyphicon glyphicon-unchecked" aria-hidden="true" ng-show="context.Enabled==0"></span>
             </div>
       </td> 
</tr>

Obviously, you can change the var “g” and “b” as you prefer.


This is the result, that it works fine for me.


See you!

venerdì 17 aprile 2015

Dynamic tooltip on TD element with Bootstrap and AngularJS.

AngularJS v. 1.2.14, Bootstrap v3.3.4

I have a table in my HTML page and on a TD element I'd like to add a dynamic tooltip because in then InnerText there is the code of the User State and in the tooltip I want to see the description of the User State.
Obviously, in my page there is a Controller and others modules loaded by AngularJS that I don’t show for simplicity.

 This is my tip:

<tr ng-repeat="r in vm.userRoles">
...
<td title="{{vm.viewState(r)}}" tooltip-trigger="mouseenter" tooltip-placement="top">{{r.Stato}}</td>
...
</tr>

Then in my AngularJS Controller I’ve added this function

vm.states: it is an array of User State.
function ViewState(r) {
       var state = $filter('filter')(vm.states, { State: r.State })[0];
       if (state != undefined) {
              return state.Description;
       } else {
              return '';
              }           
       }


And these are the results:





giovedì 19 marzo 2015

How to implement the click TAB event in a TAB Panel controller, with HTML and AngularJS.

AngularJS v. 1.2.14, Bootstrap v3.3.1

In my web page, I have this HTML code that defines a tab panel control like this:

<div ng-controller="PanelController as panelCtrl">
       <ul class="nav nav-tabs">
             <li ng-class="{ active:panelCtrl.isSelected(1)}">
                    <a ng-click="panelCtrl.selectTab(1)">Tab 1</a>
             </li>
             <li ng-class="{ active:panelCtrl.isSelected(2)}">
                    <a ng-click="panelCtrl.selectTab(2)">Tab 2</a>
             </li>
             <li ng-class="{ active:panelCtrl.isSelected(3)}">
                    <a ng-click="panelCtrl.selectTab(3)">Tab 3</a>
             </li>
       </ul>
       <div class="tab-content">
             <div class="panel" ng-show="panelCtrl.isSelected(1)">
                    <div>
                           <br />
                    </div>
             </div>
             <div class="panel" ng-show="panelCtrl.isSelected(2)">
                    <div>
                           <br />
                    </div>
             </div>
             <div class="panel" ng-show="panelCtrl.isSelected(3)">
                    <div class="clearfix">
                           <br />
                    </div>
             </div>
       </div>
</div>

Then in my javascript module (app.js) there is the controller “PanelController” definition:

(function() {
       angular.module('app', [
                    'ui.bootstrap'
             ])          
             .controller('PanelController', ['$scope', function ($scope) {
                    var self = this;

                    self.tab = 1;

                    self.selectTab = function(setTab) {
                           self.tab = setTab;
                    };

                    self.isSelected = function(checkTab) {
                           return self.tab === checkTab;
                    };

                    $scope.$on('defaultTab', function () {
                           self.tab =sharedPanelService.tab;
                    });                
             }])
})();

Well, now I want to implement an event when the user click on a TAB, for example the Tab 3 and for this purpose, I have added this factory:

.factory('sharedPanelService', function($rootScope) {
                    var sharedPanelService = {};

                    sharedPanelService.prepForBroadcastClickItem = function (tab) {
                           this.tab = tab;
                           this.broadcastClickItem();
                    };                 

                    sharedPanelService.broadcastClickItem = function () {
                           $rootScope.$broadcast('clickTab');
                    };

                    return sharedPanelService;
             })

and I have modified the “PanelController” in this way, adding this statement
sharedPanelService.prepForBroadcastClickItem(setTab);


 The new “PanelController” is:

.controller('PanelController', ['$scope', 'sharedPanelService', function ($scope, sharedPanelService) {
                    var self = this;

                    self.tab = 1;

                    self.selectTab = function(setTab) {
                           self.tab = setTab;
sharedPanelService.prepForBroadcastClickItem(setTab);
                    };

                    self.isSelected = function(checkTab) {
                           return self.tab === checkTab;
                    };

                    $scope.$on('defaultTab', function () {
                           self.tab =sharedPanelService.tab;
                    });                
             }])

where I have injected the sharedPanelService

Finally in the javascript module (customer.js) where I want to intercept the click event I have injected the sharedPanelService and modified the code like this:

(function() {

       angular.module('customer', ['ui.bootstrap'])
             .controller('CustomerController', [
                    '$scope', 'sharedPanelService',
                    function($scope, sharedPanelService) {

                           $scope.$on('clickTab', function() {
                                  var tabSelected = sharedPanelService.tab;

                                  // If Tab 3.
                                  if (tabSelected === 3) {
                                        // Todo something ...
                                  }
                           });
                    }
             ]);
})();



Kind regards!