Toggle, True/False

To display a section of HTML code when a button is clicked and hide it when the button is clicked again, similar to a dropdown menu, configure the button to function as a toggle switch.

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>

<button ng-click=”myFunc()”>Click Me!</button>

<div ng-show=”showMe”>
  <h1>Menu:</h1>
  <div>Pizza</div>
  <div>Pasta</div>
  <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
  $scope.showMe = false;
  $scope.myFunc = function() {
    $scope.showMe = !$scope.showMe;
  }
});
</script>

The showMe variable is initialized as false, and the myFunc function updates it to the opposite value using the ! (not) operator.

$event Object

You can pass the $event object as an argument when calling the function, which contains information about the browser’s event.

Example

<div ng-app=”myApp” ng-controller=”myCtrl”>

<h1 ng-mousemove=”myFunc($event)”>Mouse Over Me!</h1>

<p>Coordinates: {{x + ‘, ‘ + y}}</p>

</div>
<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>