离子列表项点击另一个HTML页面中的显示细节 [英] Ionic List Item Click show Detail in another HTML Page
本文介绍了离子列表项点击另一个HTML页面中的显示细节的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用以下代码创建了一个Items列表：
< html ng-app =ionicApp> ;
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = no>
< title>创作者< / title>
< link href =http://code.ionicframework.com/nightly/css/ionic.css =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，
姓名：比尔盖茨
}
];
}）;
< / script>
< / head>
< body ng-controller =MyCtrl>
< ion-header-bar class =bar-positive>
< h1 class =title>智能列表< / h1>
< / ion-header-bar>
< ion-content>
< ion-list>
< ion-item ng-repeat =item in itemitem =item>
{{item.name}}
< / ion-item>
< / ion-list>
< / ion-content>
< / body>
< / html>
以下是我所得到的：
但是现在我想要打开另一个html 我可以在其中显示点按列表项目的详细信息，例如 Id和Name p>
解决方案
这是工作 plunker ，并修正了一些更改！新的HTML
欢迎来到@Nimsesh Patel创建这个。 <离子峰-视图>
< ion-header-bar>
<按钮ng-click =closeModal（）>关闭< /按钮>
< h1 class =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（）;
$ b $;;
$ ionicModal.fromTemplateUrl（'detail.html'，{
scope：$ scope，
animation：'slide-in-up'
}）。then（function（modal）{
$ scope.modal = modal;
}）;
$ scope.closeModal = function（）{
$ scope.modal.hide（）;
};
}）;
在主要html中，ng-repeat存在
< body ng-controller =MyCtrl>
< ion-header-bar class =bar-positive>
< h1 class =title>智能列表< / h1>
< / ion-header-bar>
< ion-content>
< ion-list>
< ion-item ng-repeat =项目中的项目跟踪由$ indexitem =itemng-click =getdetails（$ index）>
{{item.name}}
< / ion-item>
< / ion-list>
< / ion-content>
< / body>
I have created a list of Items using the following code:
<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>
Here is what I am getting:
But now I would like to open another html page where I can show detail of tapped list item, like : Id and Name in case of above example
解决方案
Here is the working plunker with some corrected changes ! Cheers to @Nimsesh Patel for creating this.
New 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>
In your controller
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();
};
});
In main html where ng-repeat is there
<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>
这篇关于离子列表项点击另一个HTML页面中的显示细节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
