javascript - ng-click + ng-repeat 并尝试更改面板样式

Question

我正在尝试创建一个点击事件来更改我的元素样式。 我正在使用 Bootstrap 和 Angular。

这是面板，它确实显示了我在数据库中的所有组。

<div class="col-sm-6 panel-group panel-hover panel-click" ng-repeat="y in allGroups " id="panel-{{$index}}"" ng-click="showGroupsMembersList(y.GroupId)">
      <div class="panel panel-default" >
        <div class="panel-heading">
          <h4 class="panel-title">
            <p><bold>{{y.GroupName}}</bold></p>
          </h4>
        </div>
        <div class="panel">
          <div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
          <!-- <div class="panel-footer">Panel Footer</div> -->
        </div>
      </div>
    </div>

点击它后，我确实得到了所有小组成员中的一些，这是应该的。 但是如何更改群组样式呢？

我试过面板点击:

.panel-click:active{
    padding: 20px;
    box-shadow: 0 0 14px 5px #31b0d5;
}

但我想我不了解 css 函数... 还尝试通过 ID 获取元素，但每次我将 ID 发送到 ng-click 函数时，该函数都会卡住并且无法工作...

请帮忙!

Answer 1

你可以使用

ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}"

喜欢；

<div class="col-sm-6 panel-group panel-hover" ng-repeat="y in allGroups"  ng-click="y.customVariable=!y.customVariable" ng-class="{'active':y.customVariable}">
  <div class="panel panel-default" >
    <div class="panel-heading">
      <h4 class="panel-title">
        <p><bold>{{y.GroupName}}</bold></p>
      </h4>
    </div>
    <div class="panel">
      <div class="panel-body">Group Code: <div class="text-info"> {{y.GroupeCode}}</div></div>
      <!-- <div class="panel-footer">Panel Footer</div> -->
    </div>
  </div>
</div>

然后你可以使用“active”类

.active{/* do something */}