在另一个HTML页

我创建使用下面的代码的项目清单离子列表项点击查看详细信息：在另一个HTML页

<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和名称在abo的情况下ve example

来源

2016-11-08 Sophie

我不知道是多么容易为你打开一个新的HTML和路由回到列表中，但是你可以通过在你的stateprovider中添加一条路径来做到这一点，并做类似于你的标签。但是我会su这样做的最好方法是显示一个弹出窗口或modal.can你给我一个你的代码plunker？ –

@ Angular_10谢谢你的评论和建议......你能告诉我用stateprovider做这个的方法吗......分享你想的我应该写的改变......其实它有点迫切 – Sophie

这里是工作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，其中n重复是有

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

来源

2016-11-08 11:56:24

你可以用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>

来源

2016-11-08 07:40:15

我已经见过这里有一些功能：https：//github.com/DavidIsrawi/Roraima .........但是请相信我，我不想让事情不必要地复杂化......我正在寻找干净的方法来做到这一点。 .. – Sophie

这是一个更清晰的例子。 https://plnkr.co/edit/N7njvKwSAHfh3pAnlZpv?p=preview –

您可以拨打项目的点击功能就像下面

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

使用此可以显示新的屏幕上点击项目的详细信息。

来源

2016-11-08 09:04:36

@Sophie这个答案应该可以帮助你，它描述了我说的话！ –

你可以创建一个plunker进行演示，这将是很好的和有益的 –

@ Angular_10是我尝试过“Mr.Helper”的方式，但没有取得任何成功，这里是我更新的代码...请改变，因为你认为我应该需要使用它来完成：https://drive.google.com/open?id=0B6HxxqmbPu1BS1d3NHlkSElXZ2c – Sophie

在另一个HTML页

回答

相关问题