Question

我想改变已经具有backkground颜色的div的背景颜色，该颜色对于奇数元素是白色而对于偶数元素是灰色。不知道为什么它不在Jsfiddle工作。 div也有一个ng-click，我没有在JSfiddle示例中使用过。我想改变被点击为黄色的div的颜色。这是JsFiddle Link .... LINK

基本代码 -

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

Answer 1

使用ngClassOdd和ngClassEven：ng-class-odd="'odd'" ng-class-even="'even'"。

并将'奇数'和'偶数'类添加到您的css文件中，它应该可以正常工作。

检查此升级版本：http://jsfiddle.net/HB7LU/17468/

编辑：我将更改添加到黄色背景

Answer 2

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

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

请检查 - http://jsfiddle.net/HB7LU/17455/

在观看次数 -

中

<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"};
};

Answer 3

您的JsFiddle无法正常工作，因为它使用 Angular 1.0.1 ，我怀疑在该阶段的表达式中没有实现三元运算符支持。此update JsFiddle仅使用较新版本的Angular，您的示例就可以正常工作。

另请注意，ng-repeat还具有本地范围$even和$odd属性，类似于您在计算中可以使用的$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>

Answer 4

这里有几点需要注意：

你的小提琴正在使用@Beyers提到的古老版本的Angular
您可以使用ng-class-even和ng-class-odd动态设置奇数/偶数类
在click上更改类的最简单方法是将活动项存储在范围变量中，然后在ng-class中对其进行检查

在这里查看完整的小提琴：http://jsfiddle.net/HB7LU/17462/

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

在ng-click上更改div的背景颜色

4 个答案: