AngularJS ng-click not working
Question
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.");
});
};
}
1 answers
solution1
2 ACCPTED 2014-11-15 19:14:41
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.