AngularJS: Controller Functions

by | Nov 22, 2014 | AngularJS

To create a controller function that can be use with an element’s event attribute, you need to define a function with it’s implementation in it and then attached it to the $scope.

Below I have created a new Javascript file called app.js with a controller called AppController. In the $scope I have a property for storing text and one for attaching a function called onClick. When the onClick function is invoked, the message property will be set with a message ‘Hello, World!’:

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

// Controllers
app.controller('AppController', ['$scope', function($scope) {
		$scope.message = '';
		$scope.onClick = function() {
			$scope.message = 'Hello, World!';
		}
	}
]);

Below I create a html page with body that uses the AppController controller, I have a input element that is a button type and I use ng-click to bind the function that I have create in the controller. I have created a div that will display the message property every time the button is clicked:

<html ng-app="app.demo">
	<head>
	<title>Learn AngularJS - Functions</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-controller="AppController">
		<input type="button" ng-click="onClick()" value="Click Here" />
		<div><h1>{{message}}</h1></div>
	</body>
</html>

Download Source Code

AngularJS: Kendo UI AutoComplete

by | Nov 9, 2014 | AngularJS

If you are using Kendo UI for your current project and require a string input box with auto complete, Kendo’s AutoComplete directive can do the trick. The AutoComplete can use a custom template to format the results. In this blog I am going to demonstrate how to use Kendo UI’s AutoComplete and let you know what to expect from it.

Below I have a HTML markup to define my controller and an input control that uses the kendo-auto-complete directive and k-options attribute for configuring the directive.

<div ng-controller="AppController">
	<h4>Kendo UI AutoComplete</h4>
	<p>Enter a country name that starts with the letter 'A'</p>
	<input kendo-auto-complete ng-model="country" k-options="options" class="form-control"/>
	<p>Your selection: {{ country }}</p>
</div>

Below in my JavaScript I am going to create an AngularJS module called “app” and include “kendo.directives” module. Then I create a controller called “AppController” and within this controller I am defining an array of country names and their codes. I have created a variable called $scope.country and this is where we are going to store the selected value from the AutoComplete.

angular.module('app', ['kendo.directives'])
.controller('AppController', ['$scope', function($scope) {
	$scope.countries = [ 
	  {name: 'Afghanistan', code: 'AF'}, 
	  {name: 'Åland Islands', code: 'AX'}, 
	  {name: 'Albania', code: 'AL'}, 
	  {name: 'Algeria', code: 'DZ'}, 
	  {name: 'American Samoa', code: 'AS'}, 
	  {name: 'AndorrA', code: 'AD'}, 
	  {name: 'Angola', code: 'AO'}, 
	  {name: 'Anguilla', code: 'AI'}, 
	  {name: 'Antarctica', code: 'AQ'}, 
	  {name: 'Antigua and Barbuda', code: 'AG'}, 
	  {name: 'Argentina', code: 'AR'}, 
	  {name: 'Armenia', code: 'AM'}, 
	  {name: 'Aruba', code: 'AW'}, 
	  {name: 'Australia', code: 'AU'}, 
	  {name: 'Austria', code: 'AT'}, 
	  {name: 'Azerbaijan', code: 'AZ'}
	];
	
	$scope.country = '';
	
	$scope.options = {
		dataTextField: 'name',
		dataSource: $scope.countries,
		template: 'Code: #: code#<br>Name: #: name#',
	}
}]);

Now the interesting part, I have created a $scope.options configuration object that will be used by Kendo’s AutoComplete directive. In the options I have  dataTextField set as “name” which means that when we select a value from the AutoComplete the name property value from the array will be used to populate the model. Datasource will be the array of countries with their name and code, and template which is optional.

	$scope.options = {
		dataTextField: 'name',
		dataSource: $scope.countries,
		template: 'Code: #: code#<br>Name: #: name#',
	}

The template I am using is a custom template for showing matching results. If you dont use it it will just show what ever you have specified in the dataTextField property. Here I have created a very simple template that will display the name and code of the country. Display property is a template you must wrap the property name with a hash character, and the first hash character must follow by a colon.

#: name#

Your can clone a copy of my source code from Git Hub: Learn AngularJS Repository

Shares

Share