hyperlink - Angularjs When I click on link in View 1 I am Unable to Navigate to View 2 -
i searched stackoverflow simple answer. yes. believe missing simple. in learning process. taking look.
update. able navigate moreinfo.html view not binding data.
heading =======! before modifications. index.html launches 'view more info' links not work
heading =======! after modifications. 'view more info' links work no bound data
heading =======! moreinfo.html navigates fine view again no bound data
stats.html //main point of entry. <h2>soccer</h2> filter: <input type="text" ng-model="playersfilter.name" /> <br /><br /> <ul> <li>sort category</li> </ul> <table> <tr> <th ng-click="dosort('attempts')">attempts</th> <th ng-click="dosort('goals')">goals</th> <th ng-click="dosort('assists')">assists</th> <th ng-click="dosort('fouls')">fouls</th> <th ng-click="dosort('date')">date</th> <th ng-click="dosort('average')">average</th> </tr> <tr ng-repeat="player in players | filter:playersfilter | orderby:sortby:reverse"> <td>{{ player.goals }}</td> <td>{{ player.attempts }}</td> <td>{{ player.assists }}</td> <td>{{ player.fouls }}</td> <td>{{ player.date | date }}</td> <td>{{player.goals / player.attempts | number:2}}</td> <td><a href ="#/moreinfo/{{ player.id }}"> view more info</a></td> </tr> </table> <br /> <span>total games: {{ players.length }}</span>
this page want navigate when click on link 'view more info' stat.html page. nothing happens , there not error hints in in console or network tabs in chrome dev tools.
moreinfo.html <h2>more information</h2> <table> <tr> <th>teamimage </th> <th>oppimage </th> </tr> <!--<tr ng-repeat ="player in players">--> <td>{{player.image}}</td> <td>{{player.teamimage}}</td> </tr> </table>
i have embedded json.
statscontroller.js function() { var statscontroller = function ($scope) { $scope.dosort = function(propname) { $scope.sortby = propname; $scope.reverse = !$scope.reverse; }; $scope.getaverage = function(){ var average = 0; for(var = 0; < $scope.player.goals.length; i++){ var = $scope.player.goals[i]; average += (player.attempts / player.goals); } return average; } $scope.players = [ { id:1, games: [ { "goals": 1, "attempts": 6, "image": "http://www.soccer1.png", "opp": "usa", "assists": 0, "team": "ecu", "fouls": 1, "teamimage": "http://www.soccerteam1.png", "date": "2014-03-31" }, { "goals": 0, "attempts": 3, "image": "http://www.soccer2.png", "opp": "chi", "assists": 1, "team": "kaz", "fouls": 1, "teamimage": "http://www.soccerteam2.png", "date": "2014-04-02" } ] }, { id:2, games: [ { "goals": 2, "attempts": 2, "image": "http://www.soccer22.png", "opp": "usa", "assists": 0, "team": "ecu", "fouls": 1, "teamimage": "http://www.soccerteam22.png", "date": "2014-03-31" }, { "goals": 3, "attempts": 3, "image": "http://www.soccer33.png", "opp": "chi", "assists": 1, "team": "kaz", "fouls": 1, "teamimage": "http://www.soccerteam33.png", "date": "2014-04-02" } ] } ]; }; statscontroller.$inject = ['$scope']; angular.module('sportsapp') .controller('statscontroller', statscontroller); }());
i have embedded json below. lot of redundant code. ideally, want have of json in separate file , use factory doing step step.
moreinfocontroller.js (function() { var moreinfocontroller = function ($scope, $routeparams) { // route , playerid var playerid = $routeparams.playerid; $scope.games = null; function init() { (var i= 0, len=$scope.players.length; i<len; i++){ if($scope.players[i].id === parseint(playerid)) { $scope.games = $scope.players[i].games; break; } } } // init(); $scope.players = [ { id:1, games: [ { "goals": 1, "attempts": 6, "image": "http://www.soccer1.png", "opp": "usa", "assists": 0, "team": "ecu", "fouls": 1, "teamimage": "http://www.soccerteam1.png", "date": "2014-03-31" }, { "goals": 0, "attempts": 3, "image": "http://www.soccer2.png", "opp": "chi", "assists": 1, "team": "kaz", "fouls": 1, "teamimage": "http://www.soccerteam2.png", "date": "2014-04-02" } ] }, { id:2, games: [ { "goals": 2, "attempts": 2, "image": "http://www.soccer22.png", "opp": "usa", "assists": 0, "team": "ecu", "fouls": 1, "teamimage": "http://www.soccerteam22.png", "date": "2014-03-31" }, { "goals": 3, "attempts": 3, "image": "http://www.soccer33.png", "opp": "chi", "assists": 1, "team": "kaz", "fouls": 1, "teamimage": "http://www.soccerteam33.png", "date": "2014-04-02" } ] } ]; init(); }; moreinfocontroller.$inject = ['$scope','$routeparams']; angular.module('sportsapp') .controller('moreinfocontroller', moreinfocontroller); }());
your link says
<td><a href ="#/moreinfo{{ player.id}}"> view more info</a></td>
but can not see id property of player in json.
it seems issue.
additionally, seems missing / after moreinfo in href.
Comments
Post a Comment