添加具有ng-class的类，点击来自孩子的父母

Question

我有以下问题。我需要将active类设置为父级div，点击来自父级内的子级div。为了说明我将提供一个代码。为了便于阅读，省略了部分内容。

  

HTML

<div class="offer__container" ng-repeat="price in settingsPrices">
  ...
  <div class="offer__container__cta hvr-sweep-to-right">Select</div>
</div>

  

CSS

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

正如您所看到的，我有offer__container获取一些数据并执行ng-repeat，我需要能够点击offer__container__cta将active样式添加到父容器中跟踪好像我点击通过ng-repeat渲染的另一个div它应该采用活动样式并将其转移到该div。我最好还要在offer__container__cta上设置某种风格，例如让它也活跃。

我对所有解决方案持开放态度。

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

Answer 1

您可以使用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>

将此添加到ng-click功能

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

}

Answer 2

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

最好在模型中创建一个单独的标志，而不是模板中的内联变量，因为它可以使模板保持清洁。

我使用的是selected类，但您可以将其替换为您希望提供给容器div元素的类。

CSS：

.selected{
  color: red;
}

HTML：

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

JavaScript的：

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);

Answer 3

一个解决方案：

<div class="offer__container" ng-repeat="price in settingsPrices" ng-class="{active: activePrice === price.amount}">
  ...
  <div class="offer__container__cta hvr-sweep-to-right" ng-click="activePrice = price.amount">Select</div>
</div>