Ng-Controller-5

 

In this example of Ng-Controller, We have created a method in controller and added two buttons. Clicking on the first button will display name as "LearnKode" and if you enter the value in your name textbox then that will be displayed clicking on second button. See the example

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="app"> <div ng-controller="controller"> <div class="container"> <br />Your Name: <input class="form-control" ng-model="cstmName"><br /> <button class="btn btn-default" ng-click="customName('LearnKode')">LearnIt</button> <button class="btn btn-default" ng-click="customName(cstmName)">Custom name</button> <p>Your name is <b>{{name}}</b> !</p> </div> </div> <script> var app = angular.module('app', []); app.controller('controller', function ($scope) { $scope.customName = function (name) { return $scope.name = name; } }); </script> </body> </html>
Output