为什么集合尊重在 angular js 中不显示替代颜色 [英] why collection repect not show alternate color in angular js

问题描述

我正在使用离子框架.我使用 ng-repeat 制作了一个简单的表格演示，在此我制作了完美运行的每一行的备用颜色这是我使用 ng-repeat 的完美代码

我使用了 I ng-repeat

<div class="row" ng-repeat="inv 中的列 | limitTo: counter track by $index" ng-class-odd="'odd-row'"><div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="d_column_name[$index].checked && d_column_name[$index].d===field.d">{{field.value}}

<div class="col col-10 text-center brd collapse-sm"></div>

</ion-scroll><ion-infinite-scrollimmediate-check="false" on-infinite="loa(query)" distance="10%"></ion-infinite-scroll>

现在我更改了 collection-repeat 而不是 ng-repeat 我面临的问题很少

这是我使用的代码 collection-repeat

我遇到的问题很少

• 应用程序运行时行中没有替代颜色
• 当我几秒钟后向下滚动底部时，它会显示替代颜色.但是当用户向上滚动时，它会自动显示替代行颜色，为什么?
• 如何消除行之间的间隙?

我用了这个ng重复

 <ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight"><div class="row" collection-repeat="i track by $index 中的列" ng-class-odd="'odd-row'"><div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="i_column_name[$index].checked && i_column_name[$index].d===field.d">{{field.value}}

<div class="col col-10 text-center brd collapse-sm"></div>

</ion-scroll></离子含量>

解决方案

4个解决方案:

使用 ng-class-odd 和 ng-class-even

<div collection-repeat="item in items" ng-class-odd="odd-row" ng-class-even="even-row"></div>

或使用 ng-class

<div collection-repeat="item in items" ng-class="{'even-row':$even,'odd-row':$odd}"></div>

或使用纯 css

ion-scroll div.row:nth-child(even) {background: red}离子滚动 div.row:nth-child(odd) {background: blue}

最后避免使用奇数和偶数助手

 <div collection-repeat="item in items" ng-class="{white:$index%2 == 0,blue:$index%2 == 1}"></div>

更新类名以匹配您的类名

不要忘记声明这些类以查看区别:

ion-scroll .even-row{background: red}离子滚动 .odd-row {背景:蓝色}

I am using ionic framework .I make a simple demo of table using ng-repeat In this I make alternate color of each row which is running perfectly here is perfect code in which I used ng-repeat

I used I ng-repeat

<ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight">
  <div class="row" ng-repeat="column in inv | limitTo: counter  track by $index" ng-class-odd="'odd-row'">
    <div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="d_column_name[$index].checked && d_column_name[$index].d===field.d">{{field.value}}</div>
    <div class="col col-10 text-center brd collapse-sm"></div>
  </div>
</ion-scroll>
<ion-infinite-scroll immediate-check="false" on-infinite="loa(query)" distance="10%"></ion-infinite-scroll>

Now I change collection-repeat instead of ng-repeat I face few issues

here is my code which I use collection-repeat

I face few issues

• There is no alternate colors in row when application run
• when I scroll down bottom after few seconds it show alternate color.but when user scroll up then automatically it show alternate row color why ?
• how to remove gap between the rows ?

I used this isead of ng repeat

 <ion-content class="padding">

        <ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight">
          <div class="row" collection-repeat="column in i   track by $index" ng-class-odd="'odd-row'">
            <div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="i_column_name[$index].checked && i_column_name[$index].d===field.d">{{field.value}}</div>
            <div class="col col-10 text-center brd collapse-sm"></div>
          </div>
        </ion-scroll>
      </ion-content>

解决方案

4 solutions :

with ng-class-odd and ng-class-even

<div collection-repeat="item in items" ng-class-odd="odd-row" ng-class-even="even-row"></div>

or with ng-class

<div collection-repeat="item in items" ng-class="{'even-row':$even,'odd-row':$odd}"></div>

or with plain css

ion-scroll div.row:nth-child(even) {background: red}
ion-scroll div.row:nth-child(odd)  {background: blue}

finally to avoid using odd and even helpers

 <div collection-repeat="item in items" ng-class="{white:$index%2 == 0,blue:$index%2 == 1}"></div>

EDIT : update class name to match yours

don't forget to declare these classes to see the difference :

ion-scroll .even-row{background: red}
ion-scroll .odd-row {background: blue}

这篇关于为什么集合尊重在 angular js 中不显示替代颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！