有問題申請第二個div的CSS點擊項目在第一個Div

Question

我很新的angular.Need一些協助與例子。

我有兩個div。一個是用ng-repeat創建的，並使用ng-click來獲取點擊的項目。我有另一個div下面有CSS像

style="width:100px; 
float:left; 
margin-top:-30px; 
margin-left:-100px;"> 
<img src="../../../path to image" in it. 

現在我想將下面的Css div應用於ng單擊的項目。什麼是最好的方法呢？如有需要，請提供示例。我的代碼：

<div ng-repeat="p in package "> 
<div class="col-md-3 pack-align-lr cursor-poi ticket-top space-buy-pack active-pack " ng-click="testing(p)" > 
    <span class="pack">{{p}}</span><span class="spaces-font">Spaces</span> 
</div> 
<div style="width:100px;float:left;margin-top:-30px;margin-left:-100px;"><img src="../../../path to image" class="eventclass"/> 
</div> 
</div> 

在此先感謝

Answer 1

從我的理解，你想修改兄弟元素的風格，當你點擊第一個div。
如果是這樣的話，我建議你在課堂上「打包」你的css規則，比如說.selected-package。
接下來的步驟是將選定的狀態存儲在變量中（當您ng-click）並使用ng-class指令切換第二個div時的selected-package css類。

把它包起來，這裏有一個簡單的演示：

angular 
 
    .module('fancyApp', []) 
 
    .controller('fancyController', function($scope) { 
 
    $scope.packages = [ 
 
     {name:'package 1'}, 
 
     {name:'package 2'}, 
 
     {name: 'package 3'} 
 
    ]; 
 
    });

.selected-package { 
 
    color: red; 
 
} 
 
[ng-click] { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="fancyApp"> 
 
    <div ng-controller="fancyController"> 
 
    <h1>My pacakges:</h1> 
 
    <ul> 
 
     <li ng-repeat="p in packages"> 
 
     <div ng-click="p.selected = !p.selected">first div: {{p.name}}</div> 
 
     <div ng-class="{'selected-package':p.selected}">second div (is red when you click on the first one)</div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div>