添加ng班级上的点击父母的儿童

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-重复，我需要能够点击从offer__container__cta添加active样式到pa租用容器，并保持跟踪，就好像我点击另一个div通过ng-repeat呈现它应该采取积极的风格，并将其转移到该div。最好我还想在offer__container__cta上设置一定的风格，比如让它变得活跃。

我向所有解决方案开放。

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

Answer 1

可以使用ng-class根据表达式动态添加类。在对象 创建一个新的属性，并指定其使用的点击ng-init initially.Then布尔值更改为相反的布尔

<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

一个解决方案：

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

Answer 3

我已经创建假一个小提琴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);