Reputation: 2860
I have built a small Angular component into one of my websites that I am having a few issues with. I have defined a controller for my application but the view is not pulling through any of the variables or functions from the controller and I am not sure why. Here is my code:
This is my file to define the controllers:
angular.module('clubFilter.controllers', []).
controller('clubController', function($scope, $http, googleMapService) {
$scope.clubsJSON = JSONItems;
$scope.clubs = $scope.clubsJSON;
if(searchTerm == "" && activity == "") {
$scope.clubs = $scope.clubsJSON;
console.log($scope.clubs);
} else if (searchTerm != "" && activity == "") {
} else if (searchTerm == "" && activity == "") {
} else if (searchTerm != "" && activity != "") {
}
........
Here is my angular app file:
var clubFilter = angular.module("clubFilter", [
'clubFilter.controllers',
'clubFilter.services'
]);
And here is my HTML view:
<div ng-app="clubFilter" ng-cloak class="col-lg-12" ng-controller="clubController">
<div class="col-lg-3" id="clubs-filter-left">
<form ng-submit="filterClubs()">
<input type="text" name="location" ng-model="searchTerm" placeholder="Search..." />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="searchInfo" ng-show="(searchTerm != '') || (activityText != '')">
<span ng-show="searchTerm != ''"><strong>Location:</strong> {{searchTerm}}</span>
<span ng-show="activityText != ''"><strong>Activity:</strong> {{activityText}}</span>
<span class=''>(Distance indicated in miles)</span>
</div>
<div id="activityInfo" ng-show="activityText != ''">
<p>Your nearest Leisure Centres with {{activityText}} facilties</p>
</div>
</div>
<div class="col-lg-9" >
<ul class="leisure-centres">
<li ng-repeat="club in clubs" ng-show="club.show">
<div class="centre">
<a class="link" ng-href="http://isca01.bigwavemedia.info{{club.link}}">More info</a>
<a class="link" ng-show="club.distance > 0" ng-href="{club.link}" ng-cloak>{{club.distance}}m</a>
<div class="image" ng-show="club.image > 0">
<img src="{{image}}" alt="{{club.title}}" />
</div>
<div class="details">
<div class="title">
<h3>{{club.title}}</h3>
</div>
<div class="address">
{{club.building}},
{{club.street}},
{{club.city}},
{{club.county}},
{{club.postcode}}
</div>
<div class="tel">
<strong>Tel: </strong>
<a href="tel:{{club.telephone}}" ng-bind="club.telephone"></a>
</div>
<div class="email">
<strong>Email: </strong>
<a href="mailto:{{club.email}}" ng-bind="club.email"></a>
</div>
</div>
</div>
</li>
</ul>
</div>
When the page loads, the $scope.clubs object is supposed to be looped through and then show in an ng-repeat in the view. This doesn't not seem to be happening though, Can anyone see why this is not working? I have checked the structure of the object and it is fine and has been working before. Thanks
Edited to add the JSONitems object structure:
[
Object {
id="1",
title="Ashington Leisure Centre",
description="<p>Ashington Leisure Cen...ase give us a call.</p>", more...},
Object {
id="2",
title="Beach Huts",
description="<p>A trip to the beautif...ings - 01670 542222</p>", more...},
Object {
........
Upvotes: 0
Views: 1439
Reputation: 20015
//app
angular.module('clubFilter', ['clubFilterControllers'])
//controller
clubFilterControllers.controller('viewController', ['$scope', '$http', 'googleMapService',
function($scope, $http, googleMapService){
/* logic here */
}])
Try to define controller like that.
Upvotes: 1
Reputation: 2740
You have aliased your controller but are not using the alias to access the data
<li ng-repeat="club in clubItem.clubs" ng-show="club.show">
Upvotes: 0