クリックして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; 
} 

あなたは私はいくつかのデータをフェッチし、リピートngのないoffer__containerを持って見ることができるように、私ができるようにする必要がありますクリックしてからoffer__container__ctaactiveのスタイルをpaに追加するコンテナをレンタルし、別のものをクリックするかのように追跡してください。divはng-repeatでレンダリングされます。これはアクティブなスタイルをとり、そのdivに転送する必要があります。私はまた、特定のスタイルをoffer__container__ctaに設定することをお勧めしたいと思います。

私はすべてのソリューションに対応しています。

編集：これは私が達成しようとしているものの写真です。

Answer 1

あなたは動的表現に応じてクラスを追加するng-classを使用することができます。 オブジェクトに新しいプロパティを作成して、私が作成した

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

ng-click機能にこれを追加し、反対ブール

<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-init initially.Thenを使用して偽を割り当てあなたのためのフィドル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);