Menu in action

It is time to bring into being some data in the controller we created by initialising an array for the options in the menu. Create a variable menuoptions in maincontroller.js as follows:

$scope.menuoptions=
[
  {
    name: 'Home'
  },
  {
    name: 'Features'
  },
  {
    name: 'Pricing'
  },
  {
    name: 'Sign Up'
  }
];

Now to populate these options in the menu, create a div element in index.html. ng-repeat is used in order to iterate over the elements in an array, $index is used to access elements at different indices of the array.

 <div class="nav" ng-repeat="option in menuoptions">
    <ul>
      <li><a href="#" ng-click="display($index)">{{ option.name }}</a></li>
    </ul>
  </div>

The ng-click directive is used to specify the behavior of the element being clicked. Here on clicking the menu option, the display function is called which we define next in the controller.

$scope.display=function(index) {
                 var menuname= $scope.menuoptions[index].name;
                 alert(menuname);
};

The variable menuname stores the name of different menu options available and alerts the corresponding name whenever a menu item is clicked. So we learnt using directives ng-repeat and ng-click.

The menubar example can be seen running at here.

Leave a Reply

Follow

Get notified with the latest posts

Plugin Supporter WordPress Post Navigation
%d bloggers like this: