CODEWITHSUNDEEP
javascriptangularjs
Mrk Fldig
Mrk Fldig

Reputation: 4486

AngularJS ng-click not working

So i'm taking a stab at learning AngularJS starting this weekend and one thing I can't quite get to work is the ng-click functionality, could anyone offer a suggestion as to why its not working along with any general advice on anything i've done wrong?

To be clear the dropdown gets filled fine, I want to be able to catch a click for the items on it!

The HTML:

<html ng-app="slotDemo">

  <div ng-app ng-controller="gameList" >
        <div class="dropdown">
           <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
    Please Pick a Game
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li ng-repeat="slot in slots" role="presentation" ng-click="gameList.fetchGame(slot.id)"><a role="menuitem" href="#">{{slot.id}} {{slot.name}}</a></li>
  </ul>
  </div>

</div>

And the javascript:

var slotDemo = angular.module('slotDemo', [])
        .controller('gameList', gameList1);

function gameList1($scope, $http){
          $scope.slots = [];
          $http({
          method: 'GET',
          url: 'http://localhost/api/machine/list'
          }).success(function(data){
              $scope.slots = data;
          }).error(function(){
              alert("Error");
          });

          $scope.fetchGame = function(id){
              // Fetch the HTML for the slot we just clicked on...
              $scope.machineDetails = [];
              alert("oi");
              $http({
          method: 'GET',
          url: 'http://localhost/api/machine/get/' + id
          }).success(function(data){
                  $scope.machineDetails = data;
          }).error(function(){
              alert("Unable to retrieve slot machine information.");
          });
        };
    }

Upvotes: 0

Views: 121

Answers (1)

Amir Popovich
Amir Popovich

Reputation: 29836

You need to drop the gameList prefix:

ng-click="fetchGame(slot.id)"

Otherwise angular will look for a gameList object(with a fetchGame method) on your scope and you dont have one.

Upvotes: 2

Related Questions