AngularJS Framework : Directives III - ng-click and ng-hide with toggle()
bogotobogo.com site search:
ng-click
The ng-click directive defines an AngularJS click event.
<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="countController"> <button ng-click="count = count + 1">Increment</button> {{ count }} </div> <script> var app = angular.module('myApp', []); app.controller('countController', function($scope) { $scope.count = 0; }); </script> </body> </html>
ng-click / ng-hide with toggle()
<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="nameController"> <button ng-click="toggle()">Hide user</button> <p ng-hide="toggleVar"> First Name: <input type="text" ng-model="firstName" placeholder="First name"><br /> Last Name: <input type="text" ng-model="lastName" placeholder="Last name"><br /> <br /> Full Name: {{firstName + " " + lastName}} </p> </div> <script> var app = angular.module('myApp', []); app.controller('nameController', function($scope) { $scope.firstName = "Simon", $scope.lastName = "Fairless" $scope.toggleVar = false; $scope.toggle = function() { $scope.toggleVar = !$scope.toggleVar; }; }); </script> </body> </html>
The code has a default property (a variable): $scope.toggleVar = false; The ng-hide directive sets the visibility of a <p> element with two input fields, depending on the value (true or false) of toggleVar.
The function toggle() toggles toggleVar between true and false.
The value ng-hide="true" makes the element invisible.
AngularJS
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization