离子列表项单击在另一个HTML页面中显示详细信息
我已使用以下代码创建了项目列表：离子列表项单击在另一个HTML页面中显示详细信息,html,angularjs,list,ionic-framework,Html,Angularjs,List,Ionic Framework,我已使用以下代码创建了项目列表： <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
<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>
创造者
angular.module（'ionicApp'，['ionic']））
.controller（'MyCtrl'，函数（$scope）{
$scope.items=[
{
“id”：“1”，
“姓名”：“史蒂夫·乔布斯”
},
{
“id”：“2”，
“姓名”：“比尔·盖茨”
}
];
});
智能列表
{{item.name}
但是现在我想
打开另一个html详细信息，比如：Id和Name在上面的例子中您可以使用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");
})
angular.module（'app'，['ionic']））
.controller（'ChatDetailsCtrl'，函数（$scope，$stateparms，ChatService）{
$scope.chatId=$stateParams.chatId；
$scope.chat=ChatService.getChat（$scope.chatId）；
})
.controller（'ChatsCtrl'，函数（$scope，ChatService）{
$scope.chats=ChatService.getChats（）；
})
.service（'ChatService'，function（）{
返回{
聊天：[
{
id:“1”，
信息：“聊天信息1”
},
{
id:“2”，
信息：“聊天信息2”
},
],
getChats:function（）{
把这个还给我；
},
getChat:函数（chatId）{
对于（i=0；i您可以在单击项时调用函数，如下所示
<ion-list>
<ion-item ng-repeat="item in items" ng-click="functionName()">
{{ item.name }}
</ion-item>
</ion-list>
使用此功能，您可以在新屏幕上显示所单击项目的详细信息。以下是正在进行的一些更正更改！为@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>
在主html中，哪里有ng repeat
<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>
智能列表
{{item.name}
我不确定你打开一个新的html并再次发送回列表有多容易，但你可以通过在状态提供者中添加一个路由来完成，并与选项卡类似。但我建议最好的方法是显示一个弹出窗口或模式。你能给我一个你的代码吗？@Angular\u 10谢谢你的评论和建议你能告诉我使用stateprovider的方法吗？…分享你认为我应该写的更改…实际上它有点迫切我已经在这里看到了某种功能：…但相信我，我不想让事情变得不必要的复杂…我正在寻找干净的方法来做这件事…这有点清楚举个例子。@Sophie这个答案应该对你有帮助，它描述了我说的话！你能创建一个plunker来演示它吗helpful@Angular_10是的，我试过“助手先生”但是没有取得任何成功，这是我的更新代码…请按照您认为我需要使用的方式进行更改以完成更改：您可以通过任何方式创建一个示例plunker，因为此时我无法下载您的文件示例plunker？@Angular_10无论何时您可以下载，请下载并尝试…我对Ionic framework a非常陌生我真的很想把它完成…尽快…请指导我进一步
<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();
};
});
<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>