如何在AngularJS中选择兄弟元素

时间:2016-04-27 10:11:38

标签: angularjs

我有一个4-5行的div ...当我点击任何一行它应该改变所选的一个并将其颜色为红色并将其全部变为黑色......我正在使用以下逻辑但不适合我给出错误为angular.min.js:117 TypeError:angular.element(...)。兄弟姐妹不是函数

我需要包含jQuery文件吗? 我可以不包含jQuery文件吗?

plz help

$scope.divClick = function($event){
		console.log($event.target);
  
        /* below siblings function not working for me*/
		angular.element(event.target).siblings().css('color','black');
  
  
		angular.element(event.target).css('color','red');
	};
<div ng-controller="homeController">
<h1>Welcome</h1>

<div ng-repeat="x in json" ng-click="divClick($event)">
Name: {{x.Name}}<br/> City: {{x.City}}<br/> Country: {{x.Country}}<br/><br/>
</div>


</div>

2 个答案:

答案 0 :(得分:3)

将默认颜色设置为黑色。

   <div ng-repeat="x in json" ng-class="{setRed: $index == value}" ng-click="divClick($index)">

为您的班级setRed提供CSS样式。

您的控制器功能:

$scope.divClick = function(index){
    $scope.value = index;
};

答案 1 :(得分:1)

一般来说,直接从控制器修改DOM是个坏主意。 最好使用范围或模型属性,并根据它们决定应用哪个类。

<div ng-repeat="x in json" ng-click="select($index)" ng-class="{'selected': $index == selectedIndex}">
Name: {{x.Name}}<br/>
City: {{x.City}}

然后你只需要点击处理程序

更新selectedIndex
$scope.select = function(x) {
   $scope.selectedIndex = x;
};

完全可行的解决方案就在这里

https://jsfiddle.net/kvtcw8y6/4/

其他方法是在您建模时使用isSelected属性并相应地更新它。