我正在研究Ionic Material，我希望连续2张图像像Ionic material Demo app.It现在连续只显示1。我创建了 https://codepen.io/anujsphinx/pen/jVqvaV 从它，所以需要帮助来解决这个问题。
现在该问题已修复并且图像正在显示，但主要问题是保持大小，请检查相同网址上的更新笔。
答案 0 :(得分：0)
看看这个解决方案：
/*global angular*/
angular.module('ionicApp', ['ionic', 'ionic-material', 'ionMdInput'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: '/event',
abstract: true,
templateUrl: 'templates/event-menu.html'
})
.state('eventmenu.login', {
url: '/login',
views: {
'menuContent' :{
templateUrl: 'templates/login.html',
controller: 'GalleryCtrl'
}
}
});
$urlRouterProvider.otherwise('/event/login');
})
.directive('ngLastRepeat', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngLastRepeat'+ (attr.ngLastRepeat ? '.'+attr.ngLastRepeat : ''));
});
}
}
}
})
.controller('MainCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $ionicSideMenuDelegate, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
})
.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) {
console.log("in GalleryCtrl");
// Activate ink for controller
//ionicMaterialInk.displayEffect();
$scope.myPics= [{
"Title": "My Childhood",
"Like": "21",
"Comment" : "5",
"Image" : "http://www.magic4walls.com/wp-content/uploads/2013/12/lovely-child-blue-eyes-photo-wallpaper-2560x1600-1-694x417.jpg"
},{
"Title": "Funny me",
"Like": "21",
"Comment" : "5",
"Image" : "http://media.salemwebnetwork.com/cms/CW/family/2218-ChildLookUp.220w.tn.jpg"
},{
"Title": "Me",
"Like": "21",
"Comment" : "5",
"Image" : "http://1.bp.blogspot.com/-QDe-qthaKz0/UAWZ6aakdoI/AAAAAAAAFK4/2zlaIu1r20Q/s1600/baby.jpg"
},{
"Title": "Guitar",
"Like": "21",
"Comment" : "5",
"Image" : "http://imshopping.rediff.com/imgshop/800-1280/shopping/pixs/17369/c/caihd224_1._craft-art-india-handmade-dummy-miniature-of-guitar-gitar-code-cai-hd-0224-.jpg"
}];
$scope.$on('ngLastRepeat.mylist',function(e) {
console.log("in Last ");
ionicMaterialInk.displayEffect();
});
});
/*endglobal angular*//* General
==================================*/
h1 {
color: #fff;
text-shadow: 0 1px 0px #000;
font-size: 42px;
}
/* Utilities
==================================*/
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.scroll {
height: 100%;
}
/* Menu
==================================*/
.menu .bar.bar-header.expanded {
transition: all .5s ease-in-out;
}
.menu-open .bar.bar-header.expanded {
background-color: #222;
}
.menu h2 {
bottom: 0;
font-size: 18px;
left: 16px;
position: absolute;
}
.menu .avatar {
height: 88px;
width: 88px;
}
.menu.menu-left * {
font-weight: bold;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
/* Login
==================================*/
.app-icon {
background-color: #fff;
background: url('../img/login.PNG') center;
background-size: cover;
border-radius: 50%;
height: 125px;
margin: 0 auto;
width: 125px;
}
.social-login {
position: fixed;
bottom: 0;
}
.error{
padding: 4px 1px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #000000;
vertical-align: middle;
}
.red_bg{
color:red;
}
.yellow_bg{
background-color: #eae07f!important;
}
.gallery-box .card.card-gallery img {
border: none;
box-shadow: none;
display: block;
max-width: 220px;
max-height: 132px;
width: 100%;
height: 100%;
} <html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Material </title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/js/ion-md-input.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-nav-view>
</ion-nav-view>
<script id="templates/event-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list animate-rip">
<!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/event/login" class="item" menu-close>Gallery</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/login.html" type="text/ng-template">
<ion-view view-title="Gallery" class="gallery-box">
<ion-content ng-class="{expanded:isExpanded}" class="animate-fade-slide-in">
<div class="list col" >
<div class="item card card-gallery item-text-wrap in demo" ng-repeat="picsItem in myPics" >
<div class="ink dark-bg">
<h2>{{picsItem.Title}}</h2>
<img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
</div>
<div class="item tabs tabs-secondary tabs-icon-left in demo">
<a class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
{{picsItem.Like}}
</a>
<a class="tab-item stable-bg positive-900">
<i class="icon ion-chatbubbles"></i>
{{picsItem.Comment}}
</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
答案 1 :(得分：0)
我更新了我的代码笔codepen.io/anujsphinx/pen/jVqvaV
我使用col50和一些css然后我修复它。