To display data in tabular forms, we generally use ng-repeat directive that repeats an array of objects. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="firstApp" ng-controller="firstCtroller"> <a href="#"; ng-click="setOrderSort('state')">state</a> <a href="#"; ng-click="setOrderSort('city')">city</a> <table> <tr ng-repeat="y in addr | orderBy:myOrderType"> <td >{{ $index + 1 }}</td><td>{{ y.state }}</td> <td> {{ y.city }}</td> </tr> </table> </div> <script> var app = angular.module("firstApp", []); app.controller('firstCtroller', function($scope) { $scope.addr = [ {state:"Hyderabad",city:"sikandrabad"}, {state:"UP",city:"GZB"}, {state:"Delhi",city:"Anand vihar"}, {state:"Panjab",city:"Chandigrah"}, {state:"Hariyanana",city:"Sonipat"} ]; $scope.setOrderSort = function(x) { //alert('h'); $scope.myOrderType = x; } }); </script> Try In above example data is a static array of state and city. This data can come from server using […]

ng-disabled, ng-show, ng-hide and ng-click are used to bind application data to HTML elements. ng-disabled: ng-disabled is used to disable an element. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app=""> <input type = "checkbox" ng-model = "disableMe">Disable Button <input type = "button" ng-disabled = "disableMe" value="Hello" /> </div> Try ng-hide: ng-hide is used to hide an element. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app=""> <span ng-hide="true">NOT Visible.</span> <span ng-hide="false">Visible.</span> </div> Try ng-show: ng-show is used to show an element. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app=""> <span ng-show="true">Visible.</span> <span ng-show="false">NOT Vision.</span> </div> Try ng-click: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="" ng-init="click=1"> <span>Total click: {{ click }}</span> <input type="button" ng-click = "click = […]

AngularJS provides event directives. There are some common events provided by AngularJS to use in HTML. ng-mousedown – (onmousedown in javascript) ng-mouseenter – (onmouseenter in javascript) ng-mouseleave – (onmouseleave in javascript) ng-mousemove – (onmousemove in javascript) ng-mouseover – (onmouseover in javascript) ng-mouseup – (onmouseup in javascript) ng-blur – (onblur in javascript) ng-change – (onchange in javascript) ng-click – (onclick in javascript) ng-copy – (oncopy in javascript) ng-cut – (oncut in javascript) ng-dblclick – (ondblclick in javascript) ng-focus – (onfocus in javascript) ng-keydown – (onkeydown in javascript) ng-keypress – (onkeypress in javascript) ng-keyup – (onkeyup in javascript) ng-paste – (onpaste in […]

AngularJS provides following flags to handle errors and validating the input. $dirty − indicates that value has is changed. $invalid − indicates that value is invalid. $error − gives the specific error. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="clickApp" ng-controller="clickCtrl"> <form name = "testFrm" novalidate> Enter name: <input type = "text" name = "tname" ng-model = "tname" required /> <span style = "color:red" ng-show = "testFrm.tname.$dirty && testFrm.tname.$invalid"> <span ng-show = "testFrm.tname.$error.required">Name is empty.</span> </span><br /> <input type = "email" name = "email" ng-model = "email" length = "20" required /> <span style = "color:red" ng-show = "testFrm.email.$dirty && testFrm.email.$invalid"> <span ng-show = […]

HTML5 provides some attributes that can be used to validate the input fields. required: required ensures that form field must not be empty. <input name="studentName" ng-model="studentName" required> email: email ensures that form field value is in email format. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <input name="studentName" ng-model="studentName" type="email"> <div ng-app="clickApp" ng-controller="clickCtrl"> Validating state of the form and input fields: AngularJS provides a number of states for form and its controls. Properties of the input fields: $pristine – Returns true if input field is not modified. $dirty – Returns true if input field is modified. $invalid – Returns true if content input field is not […]

AngularJS global API provides some set of functions that can be invoked by using angulr object. angular.isString() angular.isNumber() angular.lowercase() angular.uppercase() angular.isString() – It is used to check if something is string or not. Returns true or false. angular.isNumber() – It is used to check if something is numeric or not. Returns true or false. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="firstApp" ng-controller="firstCtroller"> <div >State name: {{state}}</div> <div >Is numeric: {{state1}}</div> <div >Is string: {{state2}}</div> </div> <script> var app = angular.module("firstApp", []); app.controller('firstCtroller', function($scope) { $scope.state = 'delhi'; $scope.state1 = angular.isNumber($scope.state); $scope.state2 = angular.isString($scope.state); }); </script> Try angular.lowercase() – It is used to convert […]