Javascript 角度，项目详细信息

我正在学习angular（使用ionic framework，包括phone gap），我正在尝试创建一个应用程序，列出一些数据，当你点击其中一个时，它会显示详细信息。我可以列出所有项目，但我无法管理如何显示单个项目的详细信息。我知道问题可能与

$routeParams

有关，但我找不到问题所在

app.js

angular.module('app', ['ionic', 'app.controllers'])

.config(function($stateProvider, $urlRouterProvider, $routeProvider) {

    .state('app.list', {
      url: '/list',
      views: {
        'menuContent' :{
          templateUrl: "templates/list.html"
        }
      }
    })

    .state('app.staff', {
      url: '/staff/:staffid',
      views: {
        'menuContent' :{
          templateUrl: "templates/staff-details.html",
          controller: 'StaffDetailsCtrl'
        },
      }
    })

});

controllers.js

.controller('FooCtrl', function($scope) {
   $scope.staff = [
       { id: 1, name: 'Jim', color: 'red' },
       { id: 2, name: 'Bob', color: 'blue' },
       { id: 3, name: 'Peter', color: 'yellow' }
       /*... etc... */
   ];
});

// Review Controller
.controller('StaffDetailsCtrl', function($scope, $routeParams) {

  // Get staff
  alert('yeeeees');
  var id = $routeParams.staffid;
  $scope.staff = $scope.staff.get(id);

});

staff-details.html

{{staff.id}}<br />
{{staff.name}}<br />
{{staff.color}}

{{staff.id}}

{{staff.name}}

{{staff.color}

更新

---

链接到。

如果您使用的是angular ui路由器，那么您应该注入

$stateparms

而不是

$routeParams

。因此，您的代码将如下所示：

angular.module('app', ['ionic', 'app.controllers'])
    .config(function($stateProvider, $urlRouterProvider, $routeProvider) {

        $stateProvider
            .state('app.staff', {
                url: '/staff/:staffid',
                views: {
                    'menuContent' :{
                        templateUrl: "templates/staff-details.html",
                        controller: 'StaffDetailsCtrl'
                    },
                 }
            })
 });

// Review Controller
.controller('StaffDetailsCtrl', function($scope, $stateParams) {
     // Get staff
    alert('yeeeees');
    var id = $stateParams.staffid;
    $scope.staff = $scope.staff.get(id);
});

---

看起来您的

StaffDetailsCtrl

缺少代码？是的，您是对的。忘了加。我用它更新了问题@DeanWard

staff

是一个数组，它没有像

id

或

name

这样的属性。该数组的元素do@charlietfl-staff-details.html是详细信息模板。查看代码-

$scope.staff

此时是一个职员的单独实例。@ManolisC。在调试控制台中是否有任何错误？正如我所看到的，ionic framework已经有了所有的angular库。我试过了，但还是一无所获。它甚至不显示

警报

。顺便说一句，你的plunker根本不起作用，因为它缺少它所需要的任何外部lib。您在实际代码中尝试过这个吗？调试控制台中有错误吗？所以为了证明它是有效的，我创建了一个只使用ui路由器而不是ionic。。。看看这是怎么回事：）虽然有一个问题，但它似乎是有效的。如果我将

StaffDetailsCtrl

处的代码更改为

…name:name，…

它将显示3个plunkerPreviewTarget颜色。对，这显然是将name属性设置为plunker本身的内容。您需要根据传递的id从某个外部服务获取详细信息。。。