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 enter image description here

heading =======! after modifications. 'view more info' links work no bound data

enter image description here

heading =======! moreinfo.html navigates fine view again no bound data

enter image description here

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -