有问题申请第二个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>