How To PreventDefault On ng-click In AngularJS

Here’s a handy AngularJS, trick which allows you to prevent default behavior on ng-click event.

All you need to do is pass the $event parameter to your function inside the ng-click.

<button ng-click="saveData($event)">Save</button>

And receive that parameter inside your function within your controller and preventDefault() method.

$scope.saveData = function($event) {
  $event.preventDefault();
}

Must Read: How To Show Validation Errors On Submit In Angularjs?

Show Validation Errors On Submit In Angularjs

While working on one of my client’s project, I was required to display validation errors when the users hit the submit button. By default, AngularJS comes with $submitted form state. Its default value is false. As soon as the user hits the submit button, it becomes true.

We can use this state to make sure that error is hidden while the user has not clicked the submit button.

myForm.$submitted && myForm.username.$error.required

Demo:

Note: This will work only with AngularJS 1.3 or higher

Quick Tip: Using Bootstrap Tooltip With AngularJs

Using Bootstrap Tooltip With AngularJs

Tooltip is a tiny popup box that appears when the user hovers his cursor over a specific element. In this tutorial, we are going to use Bootstrap’s tooltip component in our AngularJs application. For this tutorial, we are using UI Bootstrap components.

To integrate Bootstrap Tooltip within your AngularJs application follow the steps given below:

Step 01:

Link Bootstrap Stylesheet file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Step 02:

Load AngularJs and UI Bootstrap files within your application.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="ui-bootstrap-tpls-1.3.2.min.js"></script>

Step 03:

Include the module within your project by adding ui.bootstrap as a dependency.

angular.module('myApp',['ui.bootstrap']);

Step 04:

Now, finally to add the Bootstrap tooltip use uib-tooltip attribute.

<button tooltip-placement="bottom" uib-tooltip="Hello World!">Hover Over!</button>

Useful Read: Make Bootstrap Popover Appear/Disappear on Hover Instead of Click

Resource: https://angular-ui.github.io/bootstrap/

How To Build Pagination in AngularJS

Pagination in one of the most important and essential component in any web based application. It is the process of dividing data into small groups and creating pages to display each of these groups.

In this tutorial, we are going to use AngularJS to paginate the data. For this tutorial, we are going pagination directive by Michael Bromley.

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS Pagination</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<script src="angular.min.js"></script>
	<script src="dirPagination.js"></script>
	<script src="app.js"></script>
</head>
<body>
	<div class="container" ng-app="myApp">
		<div ng-controller="countryCtrl">
			<table class="table">
			    <thead>
					<tr>
						<th>Country</th>
						<th>City</th>
					</tr>
			    </thead>
				<tbody>
					<tr dir-paginate="item in items | itemsPerPage: 5">
						<td>{{ item.country }}</td>
						<td>{{ item.city }}</td>
					</tr>
				</tbody>
  			</table>
  			<dir-pagination-controls
  				boundary-links="true"
  				direction-links="true"
  			></dir-pagination-controls>
		</div>
	</div>
</body>
</html>

As you can see, we are using bootstrap to style our page. Apart from that we have included following Javascript files,

  1. angular.min.js (Core AngularJS file)
  2. dirPagination.js (Pagination Directive)
  3. app.js (Custom JavaScript file which contains code for our application)

Within our HTML code we are using dir-paginate directive instead of regular ng-repeat directive and to display pagination itself we are using dir-pagination-controls directive. The itemsPerPage attribute for dir-paginate directive states the total number of items which will be displayed on each page. The direction-links attribute for dir-pagination-controls directive used to determine whether to show next and previous arrows and the boundary-links attribute is used to determine if we want to display arrows which points first and last pages. Items variable contains data which it is retrieving from JSON file.

JavaScript:

var app = angular.module('myApp',['angularUtils.directives.dirPagination']);

app.controller('countryCtrl', ['$scope','$http', function($scope, $http){
    $scope.items = [];
    $http.get("country.json").success(function(response){ 
        $scope.items = response;
    });
}]);

As you can see in our JavaScript code we have added angularUtils.directives.dirPagination as a dependency to our application. We have created an scope variable items which will hold our data. Then, we are using $http object to fetch data from country.json file. We are going to store the response i.e the data fetched from country.json inside items variable.

JSON:

[
	{
		"country"	: 	"India",
		"city"		: 	"Pune"
	},
	{
		"country"	: 	"Canada",
		"city"		: 	"Waterloo"
	},
	{
		"country"	: 	"Russia",
		"city"		: 	"Moscow"
	},
	{
		"country"	: 	"France",
		"city"		: 	"Paris"
	},
	{
		"country"	: 	"Japan",
		"city"		: 	"Tokoyo"
	},
	{
		"country"	: 	"New Zealand",
		"city"		: 	"Auckland"
	},
	{
		"country"	: 	"Nepal",
		"city"		: 	"Kathmandu"
	},
	{
		"country"	: 	"United Kingdom",
		"city"		: 	"London"
	},
	{
		"country"	: 	"Brazil",
		"city"		: 	"Rio De Janeiro"
	},
	{
		"country"	: 	"Peru",
		"city"		: 	"Lima"
	},
	{
		"country"	: 	"Chile",
		"city"		: 	"Santiago"
	},
	{
		"country"	: 	"Germany",
		"city"		: 	"Berlin"
	},
	{
		"country"	: 	"China",
		"city"		: 	"Beijing"
	},
	{
		"country"	: 	"Thailand",
		"city"		: 	"bangkok"
	},
	{
		"country"	: 	"South Korea",
		"city"		: 	"Seoul"
	},
	{
		"country"	: 	"Belgium",
		"city"		: 	"Brussels"
	},
	{
		"country"	: 	"Spain",
		"city"		: 	"Madrid"
	},
	{
		"country"	: 	"Netherlands",
		"city"		: 	"Amsterdam"
	}
]

Our JSON file contains a list of countries and cities which we have hardcoded inside that file. In your case it might come from the database or from an api.

Read Also: Limit the length of a string with AngularJS

So, in the way we can create a basic pagination using AngularJS. If you have any queries or suggestions, please let me know in the comment section.

How to Strip HTML Tags in AngularJS

Here’s a reusable code snippet which allows you to remove HTML tags from text using a simple AngularJS filter.

var app = angular.module('myApp', []);

app.filter('stripTags', function() {
	return function(text) {
		return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
	};
});

Usage:

<p>{{ someRandomText | stripTags }}</p>  

Read Also: Capitalize The First Letter of String Using AngularJS

Source: http://stackoverflow.com/a/17315483

How to Change AngularJS Template Brackets?

If you are using AngularJS with a template engine like Twig or Laravel’s Blade template engine, you might want to change its {{ curly braces }} to avoid any conflicts.

Useful Read : Set friendly names for validation attributes in Laravel

To change AngularJS delimiters use the following code,

<script>
var myNgApp = angular.module('myNgApp',[]);

myNgApp.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});
</script>

 

Using Laravel Blade with AngularJS

By default, Laravel ‘s Blade template engine and AngularJS both use double curly brackets to display variables. Although, There few solutions out there to resolve this conflict, such as changing Laravel’s or Angular’s tags (curly brackets). I prefer to fix this issue using an easier method.

Quick Tip : Route parameters outside controller

All you need to do is prefix angular brackets with an @ symbol,

//Laravel code
{{ $name }}

//AngularJS code
@{{ user.name }}

The @symbol prevents the blade template engine from parsing it.