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}}

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 '<a ng-click="edit(' + full.id + ')" class="cursor_hand" title="Edit User">' +
	'<md-icon md-font-set="material-icons">edit</md-icon></a>';
	}
	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);

view raw AngularJS - DataTable Plugin Rending the HTML with Angular Event Tigger such as ng-click hosted with ❤ by GitHub

	<!-- Below is the HTML Code for view file. -->
	<md-card>
	<md-card-content>
	<div layout layout-align="space-between center" >
	<md-input-container flex="25">
	<label>
	<md-icon md-font-set="material-icons md-dark" icon='search'>
	search
	</md-icon>
	Search</label>
	<input type="text" ng-model="searchQuery" ng-change="searchTable()"/>
	</md-input-container>
	</div>
	<table datatable="" dt-options="dtOptions" dt-instance="dtInstanceCallback" dt-columns="dtColumns"
	class="mdDataTable">
	</table>
	<div class="mdDataTable-footer" layout="row"></div>
	</md-card-content>
	</md-card>

view raw view-file.html hosted with ❤ by GitHub

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"