Übergeben von Daten aus der Liste "Angular Material" an eine neue Ansicht

Question

Ich arbeite an einer einfachen Anwendung, die das Verhalten einer typischen Android-App nachbildet. Momentan gibt es kein Backend, ich verwende nur ein Objekt-Array in meinem Controller. Ich habe eine Grundliste mit ein paar Elementen drin. Wenn auf die Liste geklickt wird, möchte ich, dass das Array des Index sowie die Details an eine Detailseite übergeben werden. Dies ist die Liste.

<md-list-item class="md-3-line" ng-repeat="it in ec.events" ng-href="#/details"> 
      <!--<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">--> 
      <div class="md-list-item-text" layout="column" style="margin:5px 0;"> 
       <!--<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>--> 
       <h3>{{it.description}}</h3> 
       <p><span style="color:black">Chapter: </span>{{it.chapter}}</p> 
       <p><span style="color:black">Date: </span>{{it.date}}</p> 
       <p><span style="color:black">Type: </span>{{it.type}}</p> 
       <p><span style="color:black">Days: </span>{{it.outing_days}}</p> 
      </div> 
      <md-divider></md-divider> 
     </md-list-item> 

Im Moment habe ich und ng-href mit einem Link zu den Details, aber ich brauche entlang auf meine neue, die eine Liste Info zu übergeben. Hier finden Sie die Grundlagen der Detailseite

<md-content flex layout-padding> 
    <p>{{description}}</p> 
    <p>{{chapter}}</p> 
    <p>{{type}}</p> 
    <p>{{date}}</p> 
<md-content> 

Beide Ansichten teilen sich den gleichen Controller, der ein grundlegendes Objektarray enthält.

controller('AppCtrl',function($scope){ 
$scope.events = [ 
{description:'description1',date:'07/25/2016',type:'music',chapter:'Arizona'}, 
{description:'description2',date:'08/15/2016',type:'movie',chapter:'Texas'} 
] 
}); 

Answer 1

Hier gehen Sie - CodePen

Pass $ Index ng-click auf dem md-list-item.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <md-list-item class="md-3-line" ng-repeat="it in ec.events" ng-href="#/details" ng-click="showInfo($index)"> 
     <div class="md-list-item-text" layout="column" style="margin:5px 0;"> 
      <h3>{{it.description}}</h3> 
      <p><span style="color:black">Chapter: </span>{{it.chapter}}</p> 
      <p><span style="color:black">Date: </span>{{it.date}}</p> 
      <p><span style="color:black">Type: </span>{{it.type}}</p> 
      <p><span style="color:black">Days: </span>{{it.outing_days}}</p> 
     </div> 
     <md-divider></md-divider> 
    </md-list-item> 

    <br> 
    Click info: 
    <md-content flex layout-padding> 
     <p>{{info.description}}</p> 
     <p>{{info.chapter}}</p> 
     <p>{{info.type}}</p> 
     <p>{{info.date}}</p> 
    <md-content> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages']) 

.controller('AppCtrl', function($scope) { 
    $scope.ec = {}; 
    $scope.ec.events = [ 
     {description:'description1',date:'07/25/2016',type:'music',chapter:'Arizona'}, 
     {description:'description2',date:'08/15/2016',type:'movie',chapter:'Texas'} 
    ]; 

    $scope.showInfo = function (index) { 
     $scope.info = $scope.ec.events[index]; 
    } 
});