Ионный Элемент списка Нажмите показать подробности в другой 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 из прослушиваемый элемент списка, например: Идентификатор и имя в случае abo ve пример

источник

2016-11-08 Sophie

Я не уверен, насколько легко для вас, чтобы открыть новый html и маршрут назад, чтобы перечислить, но вы можете сделать это, добавив еще один маршрут в свой stateprovider и сделайте как можно ближе к вашим вкладкам. Но я бы su ggest лучший способ сделать это показать всплывающее или 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, где нг-повтор есть

<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 page code.

<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

@ Софи этот ответ должен помочь вам, и он изображает то, что я сказал! –

вы можете создать плункер для демонстрации, которая была бы приятной и полезной –

@ Angular_10 да Я пробовал «Mr.Helper», но не получил никакого успеха, вот мой обновленный код ... пожалуйста, внесите изменения, как вы думаете, я должен нужно использовать, чтобы сделать это: https://drive.google.com/open?id=0B6HxxqmbPu1BS1d3NHlkSElXZ2c – Sophie

Ионный Элемент списка Нажмите показать подробности в другой HTML-страницы

ответ

Смежные вопросы