Javascript 在单击时更改div的背景色

我想改变一个div的背景色，它已经有一个背景色，奇数元素为白色，偶数元素为灰色。 不知道为什么它在JSFIDLE中不起作用。 div还有一个ng click，我在JSfiddle示例中没有使用它。 我想将单击的div的颜色更改为黄色。 这里是JSFIDLE链接

基本代码-

 <div ng-app="myApp">
    <div ng-controller='Ctrl'>
        <div ng-repeat='item in jsonContacts' ng-style='{"left":($last?lastX:null)+"px","top":($last?lastY:null)+"px"}'>{{item}}</div>
    </div>
</div>

{{item}}

使用和：

ng class odd=“'odd'”ng class偶数=“'偶数”

并将“奇数”和“偶数”类添加到css文件中，它应该可以工作

检查此升级版本：

---

编辑：我添加了对黄色背景的更改

您可以创建一种方法来更多地控制css条件-

ng-style="set_color(item.id)"

请检查-

在视图中-

<div ng-repeat="item in realName" ng-style="set_color(item.id)"  style="cursor:pointer" >    

$scope.set_color = function(id) {
    if(id%2 == 0)
        return {"background-color": "white"};
    else
        return {"background-color": "#F0F0F0"};
};

---

您的JSFIDLE无法工作，因为它使用的是Angular 1.0.1，我怀疑在那个阶段表达式中没有实现三元运算符支持。这只使用较新版本的Angular，您的示例的工作方式与当时一样

另请注意，

ng repeat

还具有本地作用域

$偶数

和

$奇数

属性，类似于可以在计算中使用的

$index

，例如

<div ng-controller="MyCtrl">
  Hello, {{name}}!
    <div ng-repeat="item in realName" ng-style='{"background-color": ($even?"white":"#F0F0F0")}' style="cursor:pointer" >
        {{item.id}}
        {{item.name}}
    </div>
</div>

你好，{{name}}！
{{item.id}
{{item.name}

这里有几点需要注意：

• 您的小提琴使用了@Beyers提到的Angular的古老版本
• 您可以使用ng类偶数和ng类奇数来动态设置奇数/偶数类
• 单击时更改类的最简单方法是将活动项存储在范围变量中，然后在ng类中对照它进行检查

在这里可以看到一把完整的小提琴：

你好，{{name}}！
{{item.id}
{{item.name}

Thanx获取帮助…如何确保只有一个元素应为黄色…单击后，其他元素应变为正常颜色。。。

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div class="my-div" ng-repeat="item in realName" ng-class-odd="'oddStyle'" ng-class-even="'evenStyle'" ng-click="doChangeBg(item)" ng-class="{'selectedStyle': activeItem === item.id}">
        {{item.id}}
        {{item.name}}
    </div>
</div>