Ng-Click-5

 

In this example ng-click will the changeColor() function which is used to change the color of div and color of color code in pre element if we click on the button.

 
 
 
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app="clickExample"> <div ng-controller="ExampleController"> <div class="container"> <button class="btn btn-primary" ng-click="changeColor()">Click On Me to generate random colors</button><br /><br /> <div style="height:100px;width:275px; background-color:{{color}};"> </div><br /> <pre style="width:275px; color:{{color}>;">{{color}}</pre> </div> </div> <script> var app = angular.module("clickExample", []); app.controller('ExampleController', ['$scope', function ($scope) { $scope.color = 'tomato'; $scope.Colors = ["aqua", "azure", "beige", "tan", "blue", "brown", "cyan", "darkblue", " darkcyan", " darkgrey", "darkgreen", " darkkhaki", " darkmagenta", "darkolivegreen", "darkorange", "darkorchid", "darkred", " darksalmon", " darkviolet", " gold", " green", "indigo", " khaki", " lightblue", "lightcyan", "lightgreen", " lightgrey", " lightpink", "lightyellow", "lime", "magenta", "maroon", " navy", " olive", " orange", " pink", "purple", " violet", " red ", " silver", "yellow "]; $scope.changeColor = function () { var color = Math.floor(Math.random() * 40); $scope.color = $scope.Colors[color]; } }]); </script> </body> </html>
Output