I've got an AngularJS app that has (for now) just one controller but multiple views. All of this data is pulled via $http
.
In one view, it's got an ng-repeat
for 'leagues'. It's got a button that has an ng-click
to take the amount of teams for that league and the amount of players per team and pass them to a function and set them as variables. That function also redirects the view to another page with $location
.
In that page, it's got binds to look at those variables. However, nothing shows. It can LOG
the information but it won't show it when the view changes.
Here's my git repo for it.
leagues.html
, line 27 for the ng-click that calls the function in list item 3, below, and to send to teams.html.teams.html
, to show the variables (for testing, I was just trying to display them before creating another ng-repeat)public/javascripts/app.js
, line 63 for the function to render the variables.
Most of the answers for this tend to say "use different views" or "use ui-router". Why doesn't this work?
Please see my code snippets below.
leagues.html
<div class="container col-md-12">
<h1>Manage Leagues</h1>
<div class="table-responsive">
<table class="table">
<tr>
<th>League Name</th>
<th>Location</th>
<th>Start Date</th>
<th>Duration</th>
<th>Team Count</th>
<th>Courts</th>
<th>Format</th>
<th>Manage League</th>
<th>Add Players</th>
<th>Archive</th>
</tr>
<tr ng-repeat="league in leagues">
<td>{{league.league_name}}</td>
<td>{{league.park_location}}</td>
<td>{{league.start_date | date:'dd-MM'}}</td>
<td>{{league.league_duration}}</td>
<td>{{league.team_count}}</td>
<td>{{league.court_ct}}</td>
<td>{{league.player_count}}</td>
<td><a class="btn btn-success">Manage</a></td>
<!-- This currently only logs that player and team count-->
<td><button class="btn btn-success" ng-click="createTeam(league.id,league.team_count,league.format)">Add</button></td>
<!-- //-->
<td><button class="btn btn-danger" ng-click="archiveLeague(league.id)">Archive</button></td>
</tr>
</table>
</div>
</div>
teams.html
<div class="container">
<h1>Create Teams</h1>
<h3>{{current-id}}</h3>
<h3>{{current-teams}}</h3>
<h3>{{current-format}}</h3>
<h3>Done</h3>
</div>
public/javascripts/app.js
/**
* Created by nhyland on 7/16/15.
*/
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "/pages/main.html",
controller: 'mainController',
map: 'main'
})
.when('/leagues', {
templateUrl: "/pages/leagues.html",
controller: 'mainController',
map: 'leagues'
})
.when('/create', {
templateUrl: "/pages/create.html",
controller: 'mainController',
map: 'create'
})
.when('/create/team', {
templateUrl: "/pages/teams.html",
controller: 'mainController',
map: 'teams'
})
.otherwise({
template: "<h1>Page does not exist.</h1>"
});
});
myApp.controller('mainController', function($scope, $http, $location) {
$scope.test = "Angular is working";
$scope.createLeague = function() {
$scope.league.archived = 0;
$http.post('/app/create/league', $scope.league)
.success(function(data) {
console.log(data);
$scope.leagueInfo = data;
$scope.leagues = {};
$location.path("/leagues");
})
.error(function(error) {
console.log('Error: ' + error);
});
};
function getLeagues() {
$http.get('/app/leagues/director/' + director)
.success(function(data) {
console.log(data);
$scope.leagues = data;
})
.error(function(error) {
console.log(error);
})
}
getLeagues();
$scope.createTeam = function(id, teams, format) {
console.log('League Details: ' + id);
console.log('League Details: ' + teams);
console.log('League Details: ' + format);
$scope.currentId = id;
$scope.currentTeams = teams;
$scope.currentFormat = format;
$location.path('/create/team');
$scope.getNum = function(num) {
return new Array(num);
};
};
$scope.archiveLeague = function(id) {
$http.put('/app/leagues/archive/' + id + '/' + director)
.success(function(data) {
console.log(data);
$scope.leagues = data;
})
.error(function(error) {
console.log(error);
})
};
});