Question

我正在尝试在被单击的窗口小部件图块上保持类“活动”，直到其另一个同级项被单击为止（无论页面上是否有任何其他单击动作）。这在窗口小部件内有效，但是如果用户单击页面上的另一个元素，则将删除活动状态。我该如何预防？

在图块上：<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
}

我希望活动类能够保留下来，除非单击窗口小部件中的另一个图块。如果用户单击页面上的另一个元素，则将删除活动类。

Answer 1

希望这能使您朝正确的方向前进：

(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>

如果单击，则为活动类提供活动，直到单击另一个元素，然后为第二个元素提供活动类，并从第一个元素中移除活动类

1 个答案: