将数据从角度材料列表传递到新视图
问题描述:
我正在研究一个复制典型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'}
]
});
答
在这里你去 - 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];
}
});