Question

该应用程序的这一部分显示了用户任务的最小信息。当他们点击“查看详细信息”按钮时，它会将他们带到一个页面，该页面包含有关该ID的特定CAR的更多信息。

这是一张有助于解释我所谈论的第一部分的图片：

这是我的角度代码：编辑 - 添加了ui-router代码

angular.module('ngApp', ['ui.router'])
.factory('authInterceptor', authInterceptor)
.constant('API', 'http://myserver.com/ecar/api')
.controller('task', taskData)
.controller('carDetails', carDetails)
.controller('myCars', myCars)

 // ** EDIT ** ADDED MY UI-ROUTER CODE
.config(function($httpProvider, $stateProvider, $urlRouterProvider){

  $urlRouterProvider.otherwise('/cars');      

  $stateProvider

  .state('cars', {
    url: '/cars',
    templateUrl: 'cars.html'
  })

  .state('carDetails', {
    url: '/carDetails',
    templateUrl: 'mycar_details.html',
    controller: 'carDetails'
  })

  .state('taskDetails', {
    url: '/taskDetails',
    templateUrl: 'task_details.html',
    controller: 'taskData'
  })
)}

function carDetails($scope, $http, API) {
  $http.get( API + '/car/**THE CAR ID**' ).
  success(function(data) {
    $scope.details = data;
    console.log(data);
  });
}

编辑 - 按钮HTML：

<a ng-click="" ui-sref="carDetails">View Details</a>

正如您所看到的，每个CAR都有自己唯一的ID（当然）。我可以使用以下方式显示ID：

ng-repeat="task in mainTask.Tasks"

{{ task['CAR ID'] }} // in the html

但我需要做两件事：

当用户点击“查看”按钮时，我需要将其带到另一个名为car_details.html的页面。该页面将使用“carDetails”控制器，该控制器将显示CAR的所有信息。
当用户点击同一个按钮时，我需要以某种方式获取该CAR中显示的该CAR的特定ID（{{task ['CAR ID']}}）然后以某种方式将其传递给carDetails功能在说：

$ http.get（API +'/ car / THE CAR ID'）

“CAR ID”需要将CAR的ID传递给它，只需点击“查看详细信息”按钮。这样当car_details.html页面打开时，它将为该车载入所有正确的内容

编辑 - 使用ui-view在主html文件中路由效果很好。但是，当我们点击各自的“查看详细信息”按钮时，我无法弄清楚如何从每个tile JSON ID键传递唯一ID。

我希望我已经足够清楚了。如果我没有，请告诉我，我会尽量给你更多信息。

感谢您的帮助！

Answer 1

有两种常见的方式（我知道）可以解决这个问题。第一种，最受欢迎且最受推荐的方式是使用服务或工厂。另一种是使用路由器和routeParams将卡的ID传递给细节控制器。

我不知道你打算如何显示你的详细信息页面（使用路由器导航到新页面，或者只是隐藏/显示一些隐藏的DOM元素的指令），但服务/工厂可以用于两种情况，其中routeParams只能在一个中使用。

（我还强烈建议您尽可能地遵循角度风格指南：https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md如果您想为自己节省很多麻烦）

angular.module('ngApp', [])
.service('CarDetailService', CarDetailService)
.controller('task', taskData)
.controller('carDetails', carDetails);

CarDetailService.$inject = ['$http', 'API'];
function CarDetailService($http, API) {
  var CarDetailService = this;
  CarDetailService.setCar = function(carId) {
    CarDetailService.carId = carId;
  };

  CarDetailService.getCar = function() {
    return $http.get(API + "/car/" + CarDetailService.carId);
  };
}

taskData.$inject = ['$scope', '$http', 'API', 'CarDetailService'];
function taskData($scope, $http, API, CarDetailService) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });

  $scope.selectCar = function(carId) {
    CarDetailService.setCar(carId);
    $location.url('/car-details-route');  //go to details page
  };
}

carDetails.$inject = ['$scope', 'CarDetailService'];
function carDetails($scope, CarDetailService) {
  CarDetailService.getCar().success(function(details) {
    $scope.details = details;
  });
}

你的ng-repeat看起来像这样：

<div ng-repeat="task in mainTask.tasks" ng-click="selectCar(task['Car ID'])">
  {{task['Car ID']}}
</div>

该服务是一个单例，这意味着id将通过路由更改和控制器存在而持续存在。

另一种方式是使用$ routeParams。这方面的文档在这里：https://docs.angularjs.org/api/ngRoute/service/ $ routeParams

$ routeParams允许您将ID添加到路由器读取并传递给控制器的路径中：

angular.module('ngApp', []).config(function($routeProvider) {

  $routeProvider.when('/car-details-route/:carId', {
    controller: 'carDetails',
    templateUrl: 'car-details.html'
  });

})
.controller('task', taskData)
.controller('carDetails', carDetails);


taskData.$inject = ['$scope', '$location'];
function taskData($scope, $location) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });

  $scope.selectCar = function(carId) {
    $location.path('/car-details-route/'+carId); 
  };
}

carDetails.$inject = ['$scope', 'API', '$routeParams'];
function carDetails($scope, API, $routeParams) {
  $http.get(API + "/cars/" + $routeParams.carId).success(function(details) {
    $scope.details = details;
  });
}

Answer 2

<div ng-repeat="task in mainTask.Tasks">
  <div ng-click="carDetails.getCar( task['CAR ID'] )" > {{ task['CAR ID'] }} </div>
</div>

编辑：解释：我的想法是PO不知道如何正确使用ng-click，也不知道你可以发送真实对象及其属性，或者在你的范围内实际拥有的ng-repeat中转发器对象

EDIT2：如何将carID添加到请求中

function carDetails($scope, $http, API) {
  $scope.getCar = function(carID){
     $http.get( API + '/car/' + carID ).
       success(function(data) {
          $scope.details = data;
          console.log(data);
   });
}

Answer 3

如果您想维护状态并转到details页面，我强烈建议您使用ui-router。您可以在其中详细了解here。

通过ui-router并使用ui-sref收集一些更详细的信息，了解你将如何做你想做的事情。看看这个非常有用的Stack有令人难以置信的赞成。

https://github.com/angular-ui/ui-router

Answer 4

建议使用 ui-router 进行路由

$stateProvider
    .state('car.detail', {
        url: "/car/:carId",
        templateUrl: 'car.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /car/42
            //You can get car id on detail page by
            console.log($stateParams.carId) //output : 42
        }
    })

对于查看详细信息按钮或链接，请使用以下

<div ng-repeat="task in mainTask.Tasks">
  <a ui-sref="car.detail({carId:  task['CAR ID'] })> View Detail </a>
</div>

当您点击＆＃39;查看详情＆＃39;它是汽车详细信息页面上的重定向在car.detail contorller上，您可以使用

从URL获取车辆ID

var carId = $stateParams.carId

获取 carId 后，您可以发送API调用获取汽车详情

在汽车细节控制器上，您可以创建初始化函数，如：

 $scope.getCar = function(carID){
     $http.get( API + '/car/' + carID ).
       success(function(data) {
          $scope.details = data;
          console.log(data);
   });


$scope.fnInit = function(){
var carId = $stateParams.carId;
$scope.getCar(carId);
}

Answer 5

请参阅代码注释以了解

Angualr代码

angular.module('ngApp', ['ui.router'])
    .factory('authInterceptor', authInterceptor)
    .constant('API', 'http://myserver.com/ecar/api')
    .controller('taskData', taskData)
    .controller('carDetails', carDetails)
    .controller('myCars', myCars)

    // ** EDIT ** ADDED MY UI-ROUTER CODE
    .config(function ($httpProvider, $stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/cars');

        $stateProvider
            .state('cars', {
                url: '/cars',
                templateUrl: 'cars.html'
            })

            .state('carDetails', {
                url: '/carDetails/:carId', //:carId use for pass id in URL
                templateUrl: 'mycar_details.html',
                controller: 'carDetails'
            })

            .state('taskDetails', {
                url: '/taskDetails',
                templateUrl: 'task_details.html',
                controller: 'taskData'
            })
    });

/* I think you use following controller for display task list in ng-repeat (ng-repeat="task in mainTask.Tasks")*/
function taskData($scope, $state) {

    /* fnGoToCarDetails function redirect on 'mycar_details.html' page
    * When you redirect on 'mycar_details.html' the URL is look like : "/#/carDetails/48"
    * in URL "12208" is  a car id
    * You can get it in "carDetails" controller by $stateParams (see "carDetails" controller I have write code for it)
    * */
   $scope.fnGoToCarDetails = function(id){
       $state.go('carDetails', {carId: id}) //carDetails is state name which you have declared in routing
   }
}

function carDetails($scope, $http, $stateParams, API) {

    $scope.carID = $stateParams.carId; // ID get from URL parameters


    $scope.fnGetCarDetails = function(carId){
        $http.get(API + '/car/carId').success(function (data) {
            $scope.details = data;
            console.log(data); // you get a car data here
        });
    };

  //call function for get a car detail when page load
  $scope.fnGetCarDetails($scope.carID);

}

假设task_details.html的代码如下所示

<!--I think you use "taskData" controller for display  task list in ng-repeat (ng-repeat="task in mainTask.Tasks")-->
<div ng-controller="taskData">
  <div ng-repeat="task in mainTask.Tasks">

    <a ng-click="fnGoToCarDetails( task['CAR ID'])">View Details</a>

    <!--You can also use ui-sref to redirect on 'mycar_details.html' without any function(ng-click) [for it use following code]-->
    <!--<a ui-sref="carDetails({carId: task['CAR ID']})">View Details</a>-->

  </div>
</div>

我认为上面的代码可以帮助你......

将JSON ID密钥插入ng-click指令，然后将其传递到另一个控制器

5 个答案: