角度,项目详细信息

马诺西姆

我正在学习有角度的(具有离子框架,包括电话间隙),并且尝试创建一个列出一些数据的应用程序,当您单击其中一个时,它会显示其详细信息。我能够列出所有项目,但无法管理如何显示单个项目的详细信息。我知道这个问题可能与问题有关,$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}}

更新

链接到Plunker

迪安·沃德(Dean Ward)

如果您正在使用angular-ui-router,则应该注入$stateParams而不是$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);
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

角度,项目详细信息

来自分类Dev

获取登录项目详细信息

来自分类Dev

获取登录项目详细信息

来自分类Dev

以角度和离子获取单个帖子的详细信息

来自分类Dev

esxi详细信息

来自分类Dev

eBay FindingAPI :: findItemsItemsAdvanced返回项目详细信息

来自分类Dev

如何从Sitecore媒体项目中检索视频详细信息?

来自分类Dev

团队项目集合名称的Tfs_Configuration详细信息

来自分类Dev

SQLiteOpenHelper-如何从CustomListview设置onclick项目详细信息

来自分类Dev

获取所选项目的详细信息

来自分类Dev

访问groupby中每个项目的详细信息

来自分类Dev

团队项目集合名称的Tfs_Configuration详细信息

来自分类Dev

Visual Studio导入积压项目的详细信息

来自分类Dev

我如何控制列表视图项目详细信息?

来自分类Dev

LDA VolumeViz详细信息

来自分类Dev

获取意图详细信息

来自分类Dev

Hibernate:GenericGenerator详细信息

来自分类Dev

Cassandra节点详细信息

来自分类Dev

抛出异常的详细信息

来自分类Dev

Oracle异常详细信息

来自分类Dev

记录语法详细信息

来自分类Dev

显示位置详细信息

来自分类Dev

javascript setTimeout详细信息

来自分类Dev

远程wifi详细信息

来自分类Dev

人员详细信息应用

来自分类Dev

了解xrandr的详细信息

来自分类Dev

conntrack条目详细信息

来自分类Dev

JavaScript函数详细信息

来自分类Dev

Netsuite(库存详细信息)