离子列表项单击在另一个 HTML 页面中显示详细信息

Posted

技术标签:

【中文标题】离子列表项单击在另一个 HTML 页面中显示详细信息【英文标题】:Ionic List Item Click show Detail in another HTML Page 【发布时间】:2017-03-21 15:58:43 【问题描述】:

我使用以下代码创建了一个项目列表:

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title> Creators </title>
        <link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
        <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
        <script>
            angular.module('ionicApp', ['ionic'])
            .controller('MyCtrl', function($scope) 
                $scope.items = [
                     
                        "id": "1",
                        "name": "Steve Jobs"
                    ,
                     
                        "id": "2",
                        "name": "Bill Gates"
                        
                ];
            );
        </script>
    </head>
    <body ng-controller="MyCtrl">
        <ion-header-bar class="bar-positive">
            <h1 class="title">Smart List</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item ng-repeat="item in items" item="item">
                     item.name 
                </ion-item>
            </ion-list>
        </ion-content>
    </body>
</html>

这是我得到的:

但现在我想在 open another html 页面上显示 点击的列表项detail,例如:Id 和 Name 在上述示例的情况下

【问题讨论】:

我不确定您打开一个新的 html 并再次路由回列表有多容易,但是您可以通过在您的 stateprovider 中再添加一条路由来做到这一点,并且与您的选项卡类似.但我建议最好的方法是显示一个弹出窗口或模态。你能给我你的代码吗? @Angular_10 感谢您的评论和建议...您能否告诉我仅使用 stateprovider 的方法...分享您认为我应该写的更改...实际上它有点急 【参考方案1】:

这是工作中的plunker,并进行了一些更正的更改!为 @Nimsesh Patel 创建这个干杯。

新的html

<ion-modal-view>
  <ion-header-bar>
      <button ng-click="closeModal()">close</button>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      <h3>items[currentItem].id</h3>
      <p>items[currentItem].name</p>
    </ion-content>
</ion-modal-view>

在你的控制器中

angular.module('ionicApp', ['ionic'])
            .controller('MyCtrl', function($scope, $ionicModal) 
                $scope.currentItem = 1;
                $scope.items = [
                     
                        "id": "1",
                        "name": "Steve Jobs"
                    ,
                     
                        "id": "2",
                        "name": "Bill Gates"
                        
                ];
                $scope.getdetails = function(id)
                  $scope.currentItem = id;
                  $scope.modal.show();

                ;
                $ionicModal.fromTemplateUrl('detail.html', 
                  scope: $scope,
                  animation: 'slide-in-up'
                ).then(function(modal) 
                  $scope.modal = modal;
                );
                $scope.closeModal = function() 
                  $scope.modal.hide();
                ;
            );

在 ng-repeat 所在的主 html 中

<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Smart List</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item ng-repeat="item in items track by $index" item="item" ng-click="getdetails($index)">
                     item.name 
                </ion-item>
      </ion-list>
    </ion-content>
  </body>

【讨论】:

【参考方案2】:

您可以使用 stateProvider 来实现。这是聊天列表和聊天详细信息的示例,其中当您单击特定聊天时,聊天详细信息将显示在聊天详细信息页面中。 这是包含两个控制器的 app.js 文件。

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

.controller('ChatDetailsCtrl', function($scope, $stateParams, ChatService) 
$scope.chatId = $stateParams.chatId;
 $scope.chat = ChatService.getChat($scope.chatId);
)

.controller('ChatsCtrl', function($scope, ChatService) 
 $scope.chats = ChatService.getChats();
)
.service('ChatService', function() 
 return 
   chats: [
     
       id: "1",
       message: "Chat Message 1"
     ,
     
       id: "2",
       message: "Chat Message 2"
     ,
   ],
   getChats: function() 
     return this.chats;
   ,
   getChat: function(chatId) 
     for(i=0;i<this.chats.length;i++)
       if(this.chats[i].id == chatId)
         return this.chats[i];
       
     
   
 
)
.config(function($stateProvider, $urlRouterProvider) 
 $stateProvider
   .state('chats', 
     url: "/chats",
     templateUrl: "templates/chats.html",
     controller: "ChatsCtrl"
   )
   .state('chatDetails', 
     url: "/chats/:chatId",
     templateUrl: "templates/chatDetails.html",
     controller: "ChatDetailsCtrl"
   );
 $urlRouterProvider.otherwise("/chats");
)

这是 Html 页面的正文代码。

    <body>
        <ion-pane class="pane">
<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

<script id="templates/chats.html" type="text/ng-template">
  <ion-view view-title="Chats">
    <ion-content>
      <ion-list>
<ion-item ng-repeat="chat in chats" href="#/chats/chat.id">
   Chat  chat.id 
 </ion-item>
      </ion-list>
    </ion-content>
  </ion-view>
</script>

<script id="templates/chatDetails.html" type="text/ng-template">
  <ion-view view-title="Chat Details">
<ion-content>
   <ion-item><b>Chat:</b>  chat.id </ion-item>
   <ion-item><b>Message:</b>  chat.message </ion-item>
 </ion-content>
  </ion-view>
</script>
        </ion-pane>
    </body>

【讨论】:

我已经在这里看到了某种功能:github.com/DavidIsrawi/Roraima .........但相信我,我不想让事情变得不必要地复杂化......我正在寻找干净的方法要做到这一点... 这是一个更简洁的例子。 plnkr.co/edit/N7njvKwSAHfh3pAnlZpv?p=preview【参考方案3】:

您可以在单击项目时调用函数,如下所示

<ion-list>
     <ion-item ng-repeat="item in items" ng-click="functionName()">
            item.name 
     </ion-item>
</ion-list>

在控制器中:

$scope.functionName = function()
   // open new html modal to show new screen using following
   $ionicModal.fromTemplateUrl('templates/views/details.html',
            scope: $scope,
            animation: 'none',
            backdropClickToClose: false
        ).then(function(modal)
            $scope.modal= modal;
            $scope.modal.show();
        );

使用它,您可以在新屏幕上显示单击项目的详细信息。

【讨论】:

@Sophie 这个答案应该对你有所帮助,它描述了我所说的! 你能创建一个很好用的 plunker 来演示吗 @Angular_10 是的,我已经尝试过“Mr.Helper”的方式,但没有取得任何成功,这是我更新的代码...请进行更改,因为您认为我应该使用它来完成它:drive.google.com/open?id=0B6HxxqmbPu1BS1d3NHlkSElXZ2c 你可以通过任何方式创建一个示例 plunker,因为目前我无法下载你的文件 示例插件? @Angular_10 每当您可以下载时,请下载并尝试...我对 Ionic 框架非常陌生,我真的很想完成它...尽快...请进一步指导我

以上是关于离子列表项单击在另一个 HTML 页面中显示详细信息的主要内容,如果未能解决你的问题,请参考以下文章

选定的listitem通过json在另一个活动中显示它们的详细信息后?

如何在另一个页面获取数组详细信息

在另一个组件中显示所选列表项值[关闭]

离子项目行中具有不同宽度的多列

React - 在表格行上触发点击事件并在另一个页面中显示所选行的详细信息

SharePoint 2013 - 在品牌页面中显示列表项的详细信息,而不是默认的 SharePoint 详细信息页面