將數據從角度材料列表傳遞到新視圖

Question

我正在研究一個複製典型Android應用程序行爲的簡單應用程序。現在沒有後端，我只是在我的控制器中使用對象數組。我有一個基本的清單，其中有幾個項目。當列表被點擊時，我希望索引數組以及細節被傳遞給詳細信息頁面。這是名單。

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

現在我有和ng-href鏈接到詳細信息，但我需要將列表信息傳遞給我的新視圖。以下是詳細信息頁面的基礎知識

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

兩個視圖共享包含基本對象數組的相同控制器。

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

在這裏你去 - CodePen

通行證$指數ng-click在md-list-item。

標記

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