0
Hallo Ich habe folgen Code:ausblenden geklickt/Swiped Element (ng Klick/ng-Swipe-rechts)
body {
font-family: Roboto;
box-sizing: border-box
}
.cContent {
display: flex;
flex-direction: column;
}
.cHeaders {
display: flex;
flex-direction: row;
}
.cHeader {
background-color: rgb(141, 141, 142);
color: white;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cThemeHeader {
width: 300px;
}
.cItemHeader {
width: 300px;
}
.cCountHeader {
width: 80px;
text-align: center
}
.cData {
display: flex;
}
.cRow {
display: flex;
flex-direction: column;
}
.cItemRow {
display: flex;
width: 300px;
}
.cBox {
background-color: rgb(208, 229, 199);
color: #4a7f35;
padding: 10px;
margin-left: 10px;
margin-bottom: 5px;
}
.cTheme {
width: 300px;
}
.cItem {
background-color: white;
color: #4a7f35;
border: 1px solid #4a7f35;
padding-left: 5px;
padding-right: 5px;
margin-right: 10px;
cursor: pointer;
font-size: 12px;
height: 18px;
}
.cCount {
width: 80px;
background-color: #4a7f35;
color: white;
text-align: center
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
body {
font-family: Arial;
}
.cBox {
height: 50px;
font-size: 20px;
line-height: 50px;
}
.cItem {
height: 50px;
font-size: 20px;
line-height: 50px;
}
}<!doctype html>
<html ng-app="myApp" ng-controller="myController">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Arbeitsplanung</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
angular.module("myApp", ['ngTouch']).controller("myController", function($scope) {
$scope.dataList = [{
id: 1,
count: 0,
text: 'Leistung nach Bedarf',
items: [{
id: 1,
text: 'bei Bedarf'
}]
}, {
id: 2,
count: 0,
text: 'Leistung je 2 stündlich',
items: [{
id: 1,
text: '11:00'
}, {
id: 2,
text: '15:00'
}]
}, {
id: 3,
count: 0,
text: 'Leistung auf einen fixen Zeitpunkt',
items: [{
id: 1,
text: '15:00'
}, {
id: 2,
text: '16:00'
}]
}];
$scope.hideBox = function(event) {
$(event.target).hide();
}
});
</script>
<script src="./removeItem.js"></script>
</head>
<body>
<div class="cContent">
<div class="cHeaders">
<div class="cHeader cThemeHeader">Katalog</div>
<div class="cHeader cItemHeader">Plan</div>
<div class="cHeader cCountHeader">Ist</div>
</div>
<div class="cData" ng-repeat="data in dataList">
<div class="cThemeRow">
<div class="cBox cTheme">{{data.text}}</div>
</div>
<div class="cBox cItemRow">
<div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox($event);" ng-swipe-right="data.count = data.count + 1; hideBox($event);">{{item.text}}</div>
</div>
<div class="cCountRow">
<div class="cBox cCount">{{data.count}}</div>
</div>
</div>
</div>
</body>
</html>Als ich auf dem weißen Feld klicken (oder Swipe auf dem Tablet) möchte ich das angeklickte/swiped Element ausblenden. Ich habe es mit $ event.target versucht, aber es scheint überhaupt nicht zu funktionieren. Hat jemand eine Idee, wie man das aktuell angeklickte/gewippte Element ausblenden kann (ng-klick, ng-swipe-right)? Vielen Dank.
LÖSUNG: Es funktioniert, mein Fehler war folgen:
<div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox(this);" ng-swipe-right="data.count = data.count + 1; hideBox($event);">{{item.text}}</div>
I verwendet this im ng-Klick bei $event.
Blick auf die EDIT, ich habe den Fehler gefunden. VIELEN DANK. – MrBuggy