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

【问题标题】：Ionic List Item Click show Detail in another HTML Page离子列表项单击在另一个 HTML 页面中显示详细信息
【发布时间】：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 的方法...分享您认为我应该写的更改...实际上它有点急

标签： html angularjs list ionic-framework

【解决方案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 框架非常陌生，我真的很想完成它...尽快...请进一步指导我