각도 재질 목록의 데이터를 새보기로 전달

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