Question

嗨，我刚接近角度，我有json数据。因此当我点击从json获得的Id时，它应该路由到不同的页面。我应该怎么做

Head.html

  </head>

<body ng-app="MyApp" ng-controller="MyController">

   <table border="1" style="width:100%">
    <tr >
      <td href=#home>id</td>
      <td>first_name</td>
      <td>dateBirth</td>
      <td>currentCountry</td>
    </tr>
    <tr ng-repeat="x in list">
      <td><a href="name.html">{{x.id}}</a></td>
      <td>{{x.first_name}}</td>
      <td>{{x.dateBirth}}</td>
      <td>{{x.currentCountry}}</td>
    </tr>
  </table>


</body>

的script.js

var app= angular.module("MyApp", []);

app.controller('MyController', function($scope,$http) {
      $http({
        method: "GET",
        url: "http://192.168.1.1:8080/administrator/"
      }).then(function mySucces(response) {
        $scope.list = response.data;
        console.log($scope.list)
      }, function myError(response) {
        $scope.myWelcome = response.statusText;
      });

});

我的plunker http://plnkr.co/edit/Gpmsc7pb1gfWx3EgKk6s?p=preview

感谢任何帮助

Answer 1

您可以在此超链接标记中添加ng-click属性

<td><a href="name.html" ng-click='displayFunc(x.id)'>{{x.id}}</a></td>

现在您可以在控制器中定义此功能

$scope.displayFunc = function(id)
{
   //Do something with id..
   $location.path('/some route');
}

不要忘记在控制器中注入$location依赖项。

Answer 2

有各种选项来实现您的要求，使用$routeProvider，$stateProvider和ng-click或ui-sref来实现导航至 ID 。我将使用$stateProvider进行一个简单的示例。

我将有3 views来嘲笑你所提供的内容：

header.html：，其中包含您的ng-repeat以显示表格数据，我们点击了ID进行导航。
first.html：如果用户在ID列中点击1，则会导航到 first.html
second.html：如果用户在ID列中点击2，则会导航到 second.html

你的JS：

var app = angular.module('nested', ['ui.router']);
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider.state('top', {
      url: "",
      templateUrl: "header.html",
      controller: 'MyController'
    })
    .state('first', {
      url: '/app/:id',
      templateUrl: "first.html",
      controller: 'FirstController'
    })
    .state('second', {
      url: '/app/:id',
      templateUrl: "second.html",
      controller: 'SecondController'
    })

});

app.controller('MyController', function($scope,$state) {
  /*//commented this part so that you can work on it later.
         $http({
            method: "GET",
            url: "http://192.168.1.134:8080/administrator/%20ApplicationList.json"
          }).then(function mySucces(response) {
            $scope.list = response.data;
            console.log($scope.list)
          }, function myError(response) {
            $scope.myWelcome = response.statusText;
          });
    */
    $scope.list = [{'id':1,'first_name':'alex','dateBirth':'18th march','currentCountry':'Nepal'},
                   {'id':2,'first_name':'rumba','dateBirth':'18th march','currentCountry':'USA'}
    ]

    $scope.navigate = function(id){
      if(id==1){
        $state.go('first',{id:1});
      }
      else if(id==2){
        $state.go('second',{id:2});
      }
    }


      });


app.controller('FirstController', function($scope,$state) {
  console.log(JSON.stringify($state.params));
  $scope.params = $state.params;
      });

app.controller('SecondController', function($scope,$state) {
  console.log(JSON.stringify($state.params));
  $scope.params = $state.params;
      });

在此 PLUNKER 示例中，我甚至提供了params通过controller的方式：
http://plnkr.co/edit/n8p7ycV7k5rsn1f3bQcT?p=preview

角度点击id应该路由到不同的页面

2 个答案: