离子列表项单击在另一个 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在另一个活动中显示它们的详细信息后？