Wednesday, 27 April 2016

Declare or concatenate two variables as a single variable in view (HTML) file using AngularJS

To Concatenate the two variable value using delimiter/underscore(_) in HTML using AngularJS
To print the same variable inline
{{new_variable}}
To Sum up and print the same variable inline, however for this, both variable_1 and variable_2 must have numerical values
{{new_variable}}

Friday, 15 April 2016

AngularJS DataTable Plugin Rending the HTML with Angular Event Tigger such as ng-click

To make the Angular action trigger from the DataTable plugin, you just need add the below code within the loadDataTable Function.

// Define this function first.
function createdRow(row, data, dataIndex) 
{
 // Recompiling so we can bind Angular directive to the DT
 $compile(angular.element(row).contents())(scope);
}

// Then, add the below line with the "DTOptionsBuilder.newOptions()"
.withOption('createdRow', createdRow);

Please find the sample complete function with above added code.
function getUsersDataTable(scope, $state, $stateParams, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $compile, $filter)
{
 scope.searchQuery = '';

 scope.dtInstanceCallback = function (dtInstance) {
  var datatableObj = dtInstance.DataTable;
  scope.tableInstance = datatableObj;
 };
 scope.searchTable = function () {
  var query = scope.searchQuery;

  scope.tableInstance.search(query).draw();
 };
   
 scope.dtOptions = DTOptionsBuilder.newOptions()
  .withOption('ajax', {
   dataSrc: 'data',
   url: 'api/v1/admin/users',
   type: 'GET'
  })
  .withOption('processing', true)
  .withOption('serverSide', true)
  //.withOption("sScrollX", "100%")
  .withDOM('rt<"table-tools-group"<"dt-paginate-wrapper"p><"dt-info-wrapper"i><"dt-length-wrapper"l><"clear">><"clear">')
  .withPaginationType('full')
  .withOption('createdRow', createdRow);

 function createdRow(row, data, dataIndex) 
 {
  // Recompiling so we can bind Angular directive to the DT
  $compile(angular.element(row).contents())(scope);
 }

 scope.dtColumns = [
  DTColumnBuilder.newColumn('id').withTitle('').renderWith(actionEditHtml).notSortable(),
  DTColumnBuilder.newColumn('first_name').withTitle('Name')
   .renderWith(function (data, type, full) {
    return full.first_name + ' ' + full.last_name;
   })
 ];
      
 function actionEditHtml(data, type, full, meta)
 {
  return '' +
   'edit';
 }     
  scope.edit = function (id) {
  console.log('edit id', id);
 }
}
Then, call the above function from the Angular Controller
/* Calling the above function from the Angular Controller */
getUsersDataTable($scope, $state, $stateParams, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $compile, $filter);

Below is the HTML Code for view file.

 
  

Adding the AngurJS filter to Capitalize the first word, all words or all UPPERCASE

First, create the file 'capitalize.js' with the following contents.
/* capitalize.js file contents */

myapp.filter('capitalize', function() {
    return function(input, all) {
        var reg = (all) ? /([^\W_]+[^\s-]*) */g : /([^\W_]+[^\s-]*)/;
        return (!!input) ? input.replace(reg, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : '';
    };
});

Then use the below example to adopt the code in your contexts;
To Capitalize the first word only
{{name | capitalize}} 
OUTPUT: "Hello world nepal"

To Capitalize the all words
{{name | capitalize:true}} 
OUTPUT: "Hello World Nepal"

The below example is for Data Table (angular-laravel library) rending html case:
/* In Data table rending html case */

var data = 'hello world nepal';
.renderWith(function (data, type, full) {
 return $filter('capitalize')(data)
})

// OUTPUT: "Hello world nepal"

.renderWith(function (data, type, full) {
 return $filter('capitalize')(data, true)
})
// OUTPUT: "Hello World Nepal"

/* and, For UPPERCASE */
.renderWith(function (data, type, full) {
 return data.toUpperCase();
})

// OUTPUT: "HELLO WORLD NEPAL"