Tag Archives: ng-controller

How to do a List filtering in Angular JS?

By | August 20, 2017

Filtering is really easy in Angular JS. In Angular JS we use the “filter” keyword to do the filtering. Example [html] <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>Search:</p> <p><input type="text" ng-model="my_search"></p> <ul> <li ng-repeat="name in names | filter:my_search"> {{ name }} </li> </ul> </div> <script> angular.module(‘myApp’, []).controller(‘namesCtrl’, function($scope) { $scope.names = [ ‘Google’, ‘Apple’, ‘Samsung’,… Read More »

What is Scope and RootScope in Angular JS? with examples

By | August 10, 2017

Scope Scope is the binding part between the HTML (UI) and the Javascript (the Controller). Scope object contains the available properties and methods. Scope is accessible in both HTML and Javascript. Scope Example [html] <div ng-app="myApp" ng-controller="myCtrl"> <h1>{{ name }}</h1> </div> <script> var app = angular.module(‘myApp’, []); app.controller(‘myCtrl’, function($scope) { $scope.name = "Coderz Heaven"; }); </script> [/html] Root… Read More »

How to bind variables in Angular JS using ng-bind?

By | August 5, 2017

You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property: Method 1 [html] <p ng-bind="demo_var"></p> [/html] Method 2 [html] <p>First name: {{firstname}}</p> [/html] Complete Example [html] <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p ng-bind="firstName"></p> <p>{{ lastName }}</p> </div> <script> var app = angular.module(‘myApp’, []); app.controller(‘myCtrl’, function($scope)… Read More »

Angular JS Directives in Short.

By | July 10, 2017

Here is a comprehensive list of Angular JS Directives. Directive Description ng-app It defines the root element of an application. ng-bind It binds the content of an html element to application data. ng-bind-html Itbinds the innerhtml of an html element to application data, and also removes dangerous code from the html string. ng-bind-template It specifies that the text… Read More »