5)Here fullname is a function of $scope.student object and whose task to return the combined name.6)Fullname function we’re getting the student object and then return the combined value.7)As a note, we can also defined controller object in separate JS file.Now we can use StudentController object in ng-model to get the values from controller by using the expression.Enter first name: <input type = "text" ng-model = "student.firstName"><br>Enter last name: <input type = "text" ng-model = "student.lastName"><br><br>You are entering: {{student.fullName()}}Here student.firstname and student.lastname were place to ng-model and in page itwill show default values which is assigned in JS file.And fullname() method can give in two ways a) expression or b) ng-binds.Example for ng-controller (Angular JS Controller):<html><head><title>Angular JS Controller</title><script src = "></script></head><body><h2>AngularJS Sample Application</h2><div ng-app = "mainApp" ng-controller = "studentController">Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>You are entering: {{student.fullName()}}</div><script>var mainApp = angular.module("mainApp", []);mainApp.controller('studentController', function($scope) {$scope.student = {firstName: "Mahesh",lastName: "Parashar",fullName: function() {var studentObject;studentObject = $scope.student;return studentObject.firstName + " " + studentObject.lastName;}};});</script></body></html>Angular JS – Filters:Filter are used to change modify the data and the clubbed into expression or directives using pipe character. Following is the list commonly used in directives.1)Uppercase : It Convert the Text into Uppercase2)Lowercase: it convert the text into lowercase3)Currency: It place currency symbol before numeric value.4)Filter: filter the array to a subset of it based on provided criteria.5)Order BY: orders the array based on provided criteria.Uppercase Filter:
Add uppercase filter to an expression using pipe character. Here we've added uppercase filter to print student name in all capital letters.Lowercase Filter:Add lowercase filter to an expression using pipe character. Here we've added lowercase filter to print student name in all lowercase letters.Currency Filter: Add currency filter to an expression returning number using pipe character. Here we've added currency filter to print fees using currency format.Filter:TO display only required user values. Orderby:To order values by numeric.<html><head><title>Angular JS Filters</title><script src = "></script></head><body><h2>AngularJS Sample Application</h2><div ng-app = "mainApp" ng-controller = "studentController"><table border = "0"><tr><td>Enter first name:</td><td><input type = "text" ng-model = "student.firstName"></td></tr><tr><td>Enter last name: </td><td><input type = "text" ng-model = "student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type = "text" ng-model = "student.fees"></td></tr><tr><td>Enter subject: </td><td><input type = "text" ng-model = "subjectName"></td></tr></table><br/><table
You've reached the end of your free preview.
Want to read all 23 pages?
- Spring '18
- Brian LeClaire
- ng-app
