2

市松模様のボードをレンダリングするために修正する必要があるコードがあります。現在の様子は次のとおりです。

http://i.imgur.com/Fh4pyMR.png

ご覧のとおり、2 行目の最初のセルは青になっているはずです。シフトがあります。これが私の現在のコードです：

<div class="offer" ng-class-even="'even'" ng-class-odd="'odd'" ng-repeat="offer in offers">
   <label class="ellipsis"> {{offer.name}} </label>
   <div class="offer-detail">
     <label><a href="#/offers/{{offer.id}}">Voir offre</a></label>
   </div>
</div>

ng-repeat 内で ng-if を使用しようとしましたが、うまくいかないようです。私は AngularJS の完全な初心者であるため、何かを見逃している可能性があります。

私が必要だと思うのは、各行の色を反転させる適切な条件を追加することだけです:

1-2-3-4 => 2 and 4 are blue (even)
5-6-7-8 => 5 and 7 are blue (odd)
9-10-11-12 => and so on...

編集：

#offer-list > div.odd {
  background-color: #ffffff;
}

#offer-list > div.even {
  background-color: rgba(0, 102, 204, 0.7);
}
4

3 に答える 3

1

行数が定義されていない場合、CSS がそれを達成できるかどうかはわかりません。

JS/Angular を使用してそれを行う方法は次のとおりです: $scope に新しい関数を作成します。これは、奇数行のセルで row-0 クラス、偶数行のセルで row-1 クラスになります。

<div class="offer {{ getRow($index) }}" ng-class-even="'even'" ng-class-odd="'odd'" ng-repeat="offer in offers">
   <label class="ellipsis"> {{offer.name}} </label>
   <div class="offer-detail">
     <label><a href="#/offers/{{offer.id}}">Voir offre</a></label>
   </div>
</div>

あなたのコントローラーで：

var rowNb,
    classname;
$scope.getRow = function(i){

 if(i%nbCol === 0){

    rowNb++;
    if(rowNb%2 === 0) {
       classname = "odd";
      }
    else {
         classname = "even";
    }
 }
 return "row-"+classname;
}

動作確認が出来ないのでわかりません。しかし、ここでロジックを理解していると確信しています。奇数行を構成するセルではrow-0を返し、偶数行ではrow-1を返します。

次に、いくつかの CSS を適用します。

.offer {
   background: blue;
}
.row-0:nth-child(odd) {
    background: red;
}
.row-1:nth-child(even) {
    background: red;
}

実際の例を提供してください。実装をお手伝いします。

汚いコードだと確信していますが、疲れています。

于 2014-10-29T15:55:42.187 に答える
1

単純なAngular フィルターを使用して、特定のインデックスが偶数行または奇数行にあるかどうかを確認できます。

angular.module('...')
.filter('rowType', function () {
    // Store the number of elements per row for the filter
    var elemsPerRow = 4;

    // This gets passed in the `$index` from the scope
    return function rowType(idx) {
        // Calculate the total row: Divide index by the number of elements per row
        // and use Math.floor() to get an "integer" that works with modulo (%)
        var totalRow = Math.floor(idx / elemsPerRow);
        // Return appropriate class name in each case
        return totalRow % 2 == 0 ? 'even-row' : 'odd-row';
    };
});

(必須コードを示すJSFiddle - コンソール出力を確認してください)

次のようにビューに含めます。

<div ng-repeat="offer in offers"
  class="offer {{$index | rowType}}"
  ng-class-odd="'odd'" ng-class-even="'even'">
    <label class="ellipsis"> {{offer.name}} </label>
    <div class="offer-detail">
        <label><a href="#/offers/{{offer.id}}">Voir offre</a></label>
    </div>
</div>

何が起こっているのかを簡単に確認できるようにするために、コードはもちろん少し冗長です。次に、次のように CSS ルールを設定できます。

.even-row.even, .odd-row.odd { background: blue; }
.even-row.odd, .odd-row.even { background: white; }

注: 要素に実際にクラスを設定するには、他にももっと良い方法がいくつかあります。特にngClassを見て、一番好きなものを選んでください。

于 2014-10-29T19:24:36.047 に答える