J'ai regardé partout sur StackOverflow et il ne semble pas que quelqu'un d'autre ait résolu ce problème ou j'utilise simplement le mauvais libellé ou les mots-clés qui me conduisent à ne pas trouver ce que je veux. Si c'est le cas et qu'il s'agit d'un doublon, je serais heureux si vous pouviez me relier à un cas comme celui-ci. Merci.Comment réduire l'opacité sur tout le reste à l'écran à l'exception de l'élément ng-repeat sélectionné?
J'ai un projet HTML/CSS, AngularJS, PHP et MySQL.
Les requêtes POST et GET fonctionnent parfaitement. Ce que j'essaie de faire est similaire à ce qui est déjà fait sur Google Keep.
Lorsque l'utilisateur clique sur le crayon bleu, je souhaite que l'opacité de l'élément sélectionné soit de 100%, mais que tous les divs parents et divs frères aient une valeur d'opacité de 0,3 ou quelque chose.
Je voudrais essayer et éviter jQuery si possible.
Je crois avoir lu quelque part que c'est une mauvaise pratique d'utiliser tout un tas de frameworks ensemble et que lorsque vous utilisez un framework, vous devez vous y tenir.
Je n'ai aucune idée de la façon d'aborder ce problème.
Je ne sais même pas par où commencer.
Pourriez-vous s'il vous plaît également me fournir un exemple de travail JSFiddle ou Plnkr s'il vous plaît?
Toute aide ou suggestion serait grandement appréciée!
Merci d'avance!
Ce que je veux
Ce que je
HTML
<body ng-app="myApp">
<font face="Source Sans Pro">
<div class="left">
<center>
<div ng-controller="insertController">
<h2> What I learned today </h2>
<form>
Date <br>
<input type="text" ng-model="date"><br><br>
Content <br>
<textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
<input type="button" value="Submit" ng-click="insertdata()">
</form>
</div>
</center>
</div>
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div class="card">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
</div>
</center>
</div>
</font>
</body>
EDIT
Je viens de recevoir ce travail.
Nouveau HTML
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div ng-controller="fadeController">
<div class="card" ng-class="cardFade">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div><!-- theText -->
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div><!-- deleteController -->
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div><!-- editController -->
</div><!-- card -->
</div><!-- fadeController -->
<br>
</span><!-- ng-repeat -->
<div class="overlay"></div>
</div><!-- fetchController -->
</center>
</div><!-- right -->
Nouvelle CSS
.someCSS {
background-color: white;
z-index: 200;
opacity: 1;
}
.noCSS {
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.6;
z-index: 100;
pointer-events: none; /* required to be able to click buttons under overlay */
}
fadeController.js
app.controller("fadeController", function($scope, $http, resultsService) {
$scope.cardFade = "noCSS";
$scope.editThisItem = function(item) {
if($scope.cardFade === "noCSS") {
$scope.cardFade = "someCSS";
}
else if($scope.cardFade === "someCSS") {
$scope.cardFade = "noCSS";
}
else {
alert("FATAL ERROR!");
}
};
});
Stockez l'élément sélectionné dans une variable comme 'selectedItem', puis utilisez' [class.selected] = "item == selectedItem" 'sur chaque élément ou' ngClass = "item == selectedItem? 'Selected': '' "'. Le reste est CSS ... – Siphalor