我试图让类在被点击的小部件图 block 上保持“事件”状态,直到它的另一个兄弟被点击(不管页面上的任何其他点击操作)。这在小部件内有效,但如果用户单击页面上的另一个元素,则事件状态将被删除。我怎样才能避免这种情况?
在磁贴上:<div ng-click="tile.clickButton(0)">
我尝试过:
ng-class="clickButton ? 'active' : '' "
和
ng-class="{'active' : clickButton = true}"
和
ng-class="showRespectiveEvent ? 'active' : '' "
(showRespectiveEvent 导致 ng-include 启动页面上另一个小部件的可见性)
我也试过:
adding and removing classes in angularJs using ng-click
How to add many functions in ONE ng-click?
How to set active class on ng-click?
和许多其他解决方案,但似乎没有任何效果......
要在页面上显示的小部件的代码(为了保护隐私而非常简化):
<div>
<div>
<ng-include src="'Widget Tile Page'"></ng-include>
</div>
<!-- This is the widget that the tiles hide/show when clicked -->
<div class="row">
<div ng-if="thisPageCtrl.showRespectiveEvent"></div>
</div>
</div>
// Code for Tile Widget Page:
<div ng-controller="tile as wtl">
<div class="row>
<div class="tile" ng-click="wtl.clickButton(0)">
<div>{{wtl.someButtons[0].title}}</div>
<div>{{wtl.someButtons[0].data}}</div>
</div>
</div>
</div>
<script>
$scope.clickButton = clickButton
function clickButton(iIndex) {
var btn = $scope.someButtons[iIndex];
$rootScope.$emit("highLight", btn);
}
</script>
// CSS:
.tile {
color: purple;
border: 1px solid purple;
}
.tile.active {
font-weight: 900;
color: deeppink;
border: 1px solid deeppink
}
我希望事件类保持不变,除非单击小部件中的另一个图 block 。如果用户点击页面上的另一个元素,事件类将被删除。
最佳答案
希望这能让您朝着正确的方向前进:
(function() {
var app = angular.module('tileApp', []);
app.controller('TileController', function() {
this.activeTile = null;
this.someButtons = [{
title: 'title1',
data: 'data1',
}, {
title: 'title2',
data: 'data2',
}, {
title: 'title3',
data: 'data3',
}];;
this.clickButton = function(index) {
this.activeTile = index;
}
});
})();
.tileContainer {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
.tile {
color: purple;
border: 1px solid purple;
padding: 20px;
cursor: pointer;
}
.tile.active {
font-weight: 900;
color: deeppink;
border: 1px solid deeppink;
background: pink;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
</head>
<body ng-app="tileApp">
<center><h1>Active Tile</h1></center>
<div class="tileContainer" ng-controller="TileController as tile">
<div class="tile" ng-click="tile.clickButton($index)" ng-repeat="button in tile.someButtons" ng-class="tile.activeTile === $index ? 'active' : ''">
<div>{{button.title}}</div>
<div>{{button.data}}</div>
</div>
</div>
</body>
</html>
关于html - 如果单击,则赋予 active 类直到单击另一个元素,然后赋予第二个元素 active 类并从第一个元素中删除 active 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57482181/