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