将数据从 Angular Material 列表传递到新视图

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>

现在我有一个 link 的 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

在 md-list-item 上将 $index 传递给 ng-click。

标记

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

将数据从 Angular Material 列表传递到新视图

Passing data from Angular Material list to a new view

angular-material