Jquery 在单击时将带有ng类的类从子类添加到父类

我有以下问题。我需要将

active

类设置为父级

div

，单击该父级内部的子div。为了举例说明，我将提供一个代码。为了便于阅读，请省略部分内容

HTML

如您所见，我有一个

offer\u容器

，它获取一些数据并重复ng，我需要能够从

offer\uu container\uu cta

单击，将

active

样式添加到父容器，并像单击通过ng渲染的另一个

div

一样跟踪。重复它应该采用活动样式并将其传输到该div。最好我还希望设置某些样式

提供\uuuuu容器\uuuuu cta

例如使其也处于活动状态

我愿意接受所有的解决方案

编辑：这是我想要完成的事情的图片

一种解决方案：

...
挑选

您可以使用

ng class

根据表达式动态添加类。 在对象中创建新属性，最初使用

ng init

将其赋值为false。然后单击将布尔值更改为相反的布尔值

<div class="offer__container" ng-repeat="price in settingsPrices" ng-class="{'active': price.activePrice}">
  ...
  <div ng-init="price.activePrice = false" class="offer__container__cta hvr-sweep-to-right" ng-click="changeCls(price,$index)">Select</div>
</div>

---

我为您创建了一个小提琴，下面是代码。您只需为模型创建一个布尔标志，并根据需要将其设置为活动或非活动。此外，每个选择都会清除上一个选择

最好在模型中创建一个单独的标志，而不是在模板中创建内联变量，因为这样可以保持模板不受此类标志的影响

我使用的是

selected

类，但您可以将其替换为您希望提供给container div元素的类

CSS:

HTML:

---

您忘记添加css了。你应该从那里开始。你是对的，我的错，我已经添加了css。在所有

分区上设置
选定的
类

我一次只需要在一个分区上激活它。你确定你测试了我的代码吗？我看到了另一个答案，这个答案将与你上面的评论中的行为相同。我做了，它用这种风格概括了所有的div。效果很好，但它没有从其他div中去掉这种风格。效果很好：）如果我能感谢你，我会的。还有一个问题，你可以看到我提供的图片，我如何在点击时设置这种风格与您在parent

div

上提供的方式类似，不幸的是，我无法访问正在获取的数据，只能获取有限的数据。这很好，您可以在获取数据时添加此新成员。或者最后一个解决方案是使用内联变量@kadza我已经更新了提琴，以清除之前的选择。@kadza还请添加类似您在上述问题中的评论的信息，以供您将来提问。

.selected {
    border: 2px solid #ffbe10;
}
.selected-cta {
    background-color: #ffbe10;
}

<div class="offer__container" ng-repeat="price in settingsPrices" ng-class="{'active': price.activePrice}">
  ...
  <div ng-init="price.activePrice = false" class="offer__container__cta hvr-sweep-to-right" ng-click="changeCls(price,$index)">Select</div>
</div>

var globalIndex = 0;
$scope.changeCls = function(price, index) {
    price.activePrice = !price.activePrice;
    $scope.settingsPrices[globalIndex].activePrice = false;
    globalIndex = index;

}

.selected{
  color: red;
}

<div ng-app="myApp">
<div ng-controller="MyCtrl as vm">
  <div class="offer__container" data-ng-class="{ selected: price.isSelected}" ng-repeat="price in vm.settingsPrices">
  {{price.amount}}
  <button class="offer__container__cta hvr-sweep-to-right" data-ng-click="vm.select(price)">Select</button>
</div>
</div>
</div>

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    var vm = this;

    vm.settingsPrices = [{
        amount: 99,
      isSelected: false
    }, 
    {
        amount: 10,
      isSelected: false
    }
    ];

    vm.select = function(price){
        vm.removeAllSelection();
     price.isSelected = true;
    }

    vm.removeAllSelection = function(){
        angular.forEach(vm.settingsPrices, function(value, key) {
             value.isSelected = false;
                });
    }
}

angular.module('myApp').controller('MyCtrl', MyCtrl);