如何使用AngularJS操纵当前元素的父元素，兄弟元素，下一元素和前一元素？

Question

以下是我将$scope属性和值附加到控件的html代码：

这是点击功能，我点击图片上的图片路径点击：

$scope.ratingClick = function(e)
{
    $log.info(e.currentTarget.src); //Current element src
    $log.info(e.next().src);        //Next Element Src
    $log.info(e.prev().src);        //Prev Element Src
}

在每个图像上单击，我必须更改当前，上一个和下一个元素的图像URL。但我只能获得已被点击的当前图片网址。

如何使用AngularJS中的当前元素获取parent，next，previous和sibling元素？

Answer 1

e是指click事件，通常e.target保存对实际相关元素的引用（我不确定它与currentTarget之间的区别是什么）

您可以像这样使用e.target：

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.items = [
    1, 2, 3, 4, 5, 6
  ];
  $scope.logPrevNext = function (e) {
    console.log('prev', angular.element(e.target).prev().text());
    console.log('current', angular.element(e.target).text());
    console.log('next', angular.element(e.target).next().text());
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in items" ng-click="logPrevNext($event)">
    Item #{{$index}}
  </div>
</div>

但是，我强烈建议不要这样做 - 另一种选择，更像“angular-y”的方式是这样的：

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.itemStrNo = [
    'one', 'two', 'three', 'four', 'five', 'six'
  ];
  $scope.items = [
    1, 2, 3, 4, 5, 6
  ];
  $scope.logPrevNext = function (idx) {
    $scope.itemStrNo[idx-1] = 'BOOM!';
    $scope.itemStrNo[idx] = 'SNIKT!';
    $scope.itemStrNo[idx+1] = 'POW!';
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>


<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in items" ng-click="logPrevNext($index)">
    Item no. {{itemStrNo[$index]}}
  </div>
</div>

当然，您可以使用数组（如我所用），函数或常规变量...无论您选择什么。但是直接以角度操纵元素是不好的，特别是因为双向绑定可能会覆盖下一个摘要周期中的更改。