0
我正在開發一個像tinder這樣的應用程序，我成功地創建了左右滑動和刷卡右鍵效果，我正在使用ng-repeat，但是我希望卡片不應該重複，直到所有卡片交換了一次。Angular JS ng-repeat
這裏是我的代碼： -
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tinder Clone</title>
<link href="http://112.196.33.85/solitaire/demoui/john/10oct/css/style.css" rel="stylesheet">
<script src="http://112.196.33.85/solitaire/demoui/john/10oct/js/custom.js"></script>
<script src="http://112.196.33.85/solitaire/demoui/john/10oct/js/cards.js"></script>
<style>
.ionic-logo {
display: block;
margin: 15px auto;
width: 96px;
height: 96px;
}
.pane {
background-color: #333 !important
}
.bar.bar-transparent {
background-color: transparent;
background-image: none;
border: none;
}
.bar .title {
color: #eee;
}
.swipe-cards {
position: fixed;
}
.swipe-card {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
display: none;
position: fixed;
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
left: 50%;
top: 50%;
width: 300px;
height: 245px;
margin-left: -150px;
margin-top: -150px;
box-sizing: border-box;
background-color: rgb(255,255,255);
border-radius: 4px;
overflow: hidden;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
.swipe-card .title {
height: 0px;
/*padding: 5px;*/
line-height: 30px;
color: #444;
}
.swipe-card .image {
overflow: hidden;
max-height: 250px;
}
.swipe-card .button {
border: none;
}
.swipe-card .image img {
width: 100%;
border-radius: 0px 0px 4px 4px; min-height:200px; max-height:200px;
}
#start-card {
color: #fff;
background-color: #30BD8A;
line-height: 300px;
word-wrap: break-word;
border: 6px solid #4CD68E;
text-align: center;
}
#start-card span {
display: inline-block;
line-height: 40px;
width: 200px;
font-size: 30px;
vertical-align: middle;
}
#footer .button {
color: #fff;
}
@-webkit-keyframes bounceIn {
0% {
-webkit-transform: scale(0,0);
}
70% {
-webkit-transform: scale(1.2,1.2);
}
100% {
-webkit-transform: scale(1,1);
}
}
@-moz-keyframes bounceIn {
0% {
-moz-transform: scale(0,0);
}
70% {
-moz-transform: scale(1.2,1.2);
}
100% {
-moz-transform: scale(1,1);
}
}
.swipe-card.pop-in-start {
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
}
.swipe-card.pop-in {
-webkit-animation: bounceIn 0.3s ease-out;
-moz-animation: bounceIn 0.3s ease-out;
}
</style>
</head>
<body ng-app="starter" animation="slide-left-right-ios7" no-scroll>
<pane ng-controller="CardsCtrl" class="pane">
<header-bar type="bar-transparent" title="'Help out'"></header-bar>
<p style="color:white; display:none;">Accepted: {{accepted}}, Rejected: {{rejected}}</p>
<swipe-cards>
<swipe-card on-swipe="cardSwiped()" id="start-card">
<img src="images/pic1.jpg" alt=""/>
</swipe-card>
<swipe-card ng-repeat="card in cards" on-swipe="cardSwiped($index)">
<div ng-controller="CardCtrl">
<div class="title">
{{card.title}}
</div>
<div class="image">
<img ng-src="{{card.image}}">
</div>
<div class="button-bar">
<button style="color:red;" class="button button-clear button-positive" ng-click="reject()">UGH</button>
<button style="color:green;" class="button button-clear button-positive" ng-click="accept()">YUM</button>
</div>
</div>
</swipe-card>
</swipe-cards>
</pane>
<script>
angular.module('starter', ['ionic', 'ionic.contrib.ui.cards'])
.directive('noScroll', function($document) {
return {
restrict: 'A',
link: function($scope, $element, $attr) {
$document.on('touchmove', function(e) {
e.preventDefault();
});
}
}
})
.controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate, $rootScope) {
$rootScope.accepted = 0;
$rootScope.rejected = 0;
var cardTypes = [
{ title: '', image: 'images/pic1.jpg' },
{ title: '', image: 'images/pic2.jpg' },
{ title: '', image: 'images/pic3.jpg' },
{ title: '', image: 'images/pic4.jpg' },
{ title: '', image: 'images/pic5.jpg' },
{ title: '', image: 'images/pic6.jpg' },
{ title: '', image: 'images/pic7.jpg' },
{ title: '', image: 'images/pic8.jpg' },
{ title: '', image: 'images/pic9.jpg' },
{ title: '', image: 'images/pic10.jpg' }
];
$scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);
$scope.cardSwiped = function(index) {
$scope.addCard();
};
$scope.cardDestroyed = function(index) {
if (this.swipeCard.positive === true) {
$scope.$root.accepted++;
} else {
$scope.$root.rejected++;
}
$scope.cards.splice(index, 1);
};
$scope.addCard = function() {
var newCard = cardTypes[Math.floor(Math.random() * cardTypes.length)];
newCard.id = Math.random();
$scope.cards.push(angular.extend({}, newCard));
}
})
.controller('CardCtrl', function($scope, $ionicSwipeCardDelegate, $rootScope) {
$scope.accept = function() {
var card = $ionicSwipeCardDelegate.getSwipebleCard($scope);
$rootScope.accepted++;
card.swipe(true);
}
$scope.reject = function() {
var card = $ionicSwipeCardDelegate.getSwipebleCard($scope);
$rootScope.rejected++;
card.swipe();
};
});
</script>
</body>
</html>
你能創建一個http://jsfiddle.net/？ – 2014-10-10 08:08:29
http://jsfiddle.net/xknhu3mm/ – 2014-10-10 08:20:24
這裏是我工作的鏈接：-http：//112.196.33.85/solitaire/demoui/john/10oct/swiper.html – 2014-10-10 08:20:45