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

问题描述 投票：4回答：3

我使用以下代码创建了一个Items列表：

<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>

这是我得到的：

enter image description here

但现在我想open another html页面，我可以显示点击列表项目的detail，如：上面的例子中的Id和名称

html angularjs list ionic-framework
3个回答
3
投票

这是工作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();
                };
            });

在主要的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>
1
投票

你可以使用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>
1
投票

您可以点击下面的项目来调用函数

<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();
        });
}

使用此功能，您可以在新屏幕上显示已点击项目的详细信息。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.