为什么收集repect没有表现出角的js其他颜色 [英] why collection repect not show alternate color in angular js

问题描述

我使用的离子框架。我让使用表的一个简单的演示 NG-重复在此我提出这是完全运行的每一行交替颜色
这里是完美的code中，我使用的NG-重复

我用我NG-重复

 ＆LT;离子滚动滚动条Y =真代表手柄=我吴式=viewHeight＆GT;
  ＆LT; D​​IV CLASS =行NG-重复=，在INV栏| limitTo：计数器由$指数跟踪纳克级的奇='奇数行'＆GT;
    ＆LT; D​​IV CLASS =山坳BRD崩溃-SMNG重复=字段column.columnsNG秀=d_column_name [$指数] .checked＆放大器;＆安培; d_column_name [$指数] .D ===场.D＆GT; {{field.value}}＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL COL-10文本的中心BRD崩溃-SM＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
＆LT; /离子滚动＆GT;
＆所述;离子无限滚动立即检查=假的无限=LOA（查询）距离=10％＆GT;＆下; /离子无限滚动＆GT;
 

现在我换收集重复而不是 NG-重复我面对的几个问题。

这是我的code，我使用收集重复

我面对的几个问题。

• 有行无备用颜色时，应用程序运行


• 当我向下滚动几秒钟后，底部显示它替代色系最多时用户滚动，然后自动显示交替行的颜色，为什么？


• 怎么行之间移除差距？

我用这个isead 纳克重复

 ＆LT;离子内容类=填充＆GT;        ＆LT;离子滚动滚动条Y =真代表手柄=我吴式=viewHeight＆GT;
          ＆LT; D​​IV CLASS =行收集重复=列跟踪我了$指数纳克级的奇='奇数行'＆GT;
            ＆LT; D​​IV CLASS =山坳BRD崩溃-SMNG重复=字段column.columnsNG秀=i_column_name [$指数] .checked＆放大器;＆安培; i_column_name [$指数] .D ===场.D＆GT; {{field.value}}＆LT; / DIV＆GT;
            ＆LT; D​​IV CLASS =COL COL-10文本的中心BRD崩溃-SM＆GT;＆LT; / DIV＆GT;
          ＆LT; / DIV＆GT;
        ＆LT; /离子滚动＆GT;
      ＆LT; /离子含量＆GT;
 

解决方案

4的解决方案：

与纳克级的奇和纳克级，甚至

 ＆LT; D​​IV收集重复=项中的项目纳克级的奇=奇数行纳克级，甚至=偶数行＆GT;＆LT; / DIV＆GT;
 

或纳克级

 ＆LT; D​​IV收集重复=项中的项目NG-CLASS ={'偶数行：$甚至，奇数行：$奇}＆GT ;＆LT; / DIV＆GT;
 

或纯CSS

 离子滚动div.row：第n个孩子（甚至）{背景：红}
离子滚动div.row：第n个孩子（奇数）{背景：蓝色}
 

终于避免使用奇数和偶数的助手

 ＆LT; D​​IV收集重复=项中的项目NG-CLASS ={白：$索引％2 == 0，蓝：$索引％2 == 1} ＆GT;＆LT; / DIV＆GT;
 

编辑：更新类名来匹配你的

不要忘了申报这些类看出区别：

 离子滚动。连排{背景：红}
离子滚动.odd行{背景：蓝色}
 

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}

这篇关于为什么收集repect没有表现出角的js其他颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！