Question

我正在使用角度js和离子框架来开发应用程序。我想只为奇数显示边框。这是我的代码：

<div class="media-body" style="padding-bottom:25px;">                           
                                    <h2 class="align_center">{{services.name}}</h2>

                                       <a href="#job/{{services.id}}">
                                        <h2 class="align_center_des">{{services.description}}</h2>


                                </div>
                            </div></div>

这是Css

.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
border-right: 1px solid #E4E4E4;
margin-bottom: 31px;
height: 144px;
}

这是小提琴： https://jsfiddle.net/asetkL0n/

Answer 1

我认为最好的解决方案是使用ng-class，因此你必须创建一个只能正确添加边框的类。

我认为你处于ng-repeat循环中，所以代码看起来像

<div data-ng-class="{border-right: ($index%2)===0}" class="col-32-custom">

这里你有偶数($index%2)===0的条件，所以div在事件编号上会有右边的类。

Answer 2

你可以使用ng-class-odd / ng-class-even甚至在ng-repeat中为这些项添加特定的类。

示例：ng-class-odd

Answer 3

CSS还允许您定位特定的奇数或偶数元素。一个例子可能是：

.col-32-custom {
width: 32%;
float: left;
margin-left: 1%;
margin-bottom: 31px;
height: 144px;
}
.col-32-custom:nth-child(odd) {
border-right: 1px solid #E4E4E4;
}

其中，在第n个孩子中，你可以通过，＆＃34;奇数＆＃34;，＆＃34;偶数＆＃34;，＆＃34; 2n＆＃34;，＆＃34; 2n + 1＆＃ 34;，或n。

中的任何表达

如何在角度js中使用循环来隐藏css border-right

3 个答案: