Question

我对angular很新。也需要一些例子帮助。

我有两个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-clicked项目。最好的方法是什么？如有必要，请提供示例。我的代码：

<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时修改兄弟元素的样式如果是这样，我建议你＆＃34;打包＆＃34;你的css规则在课堂上，让我们说.selected-package 接下来的步骤是将所选状态存储在变量中（当您ng-click时）并使用ng-class指令在第二个div上切换selected-package css类。

要总结一下，这是一个简单的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

有问题将第二个基于div的CSS应用于第一个Div中的点击项目

1 个答案: