1

http://codepen.io/leongaban/pen/KpZxKG?editors=110

特定のクラスの div を含む li にボーダー スタイルを追加しようとしています。この場合.text-trans-normal。

これを達成するために存在する条件はありますか？

上記の Codepen は一例に過ぎません。以下は、Angular 構文を使用した実際のマークアップです。

<ul ng-show="loadingTickersDone" class="tickers-list">

    <li ng-repeat="ticker in tickers"
        id="{{ticker.ticker}}"
        ng-hide="ticker.removed"
        ng-class="{'selected':ticker.selected}">

        <div class="ticker"
             ng-click="unselectAll(); selectTicker('top', ticker); ticker.selected = !ticker.selected;"
             ng-class="{'text-trans-normal' : ticker.ticker == 'All'}"
             ng-if="ticker.ticker != 'ALL'"
             >
             {{ticker.ticker}}
        </div>

    </li>
</ul>

CSS

.button {
  float: left;
  overflow: hidden;
  position: relative;
  margin: 0 10px 10px 0;
  padding: 9px 10px;
  width: auto;
  cursor: pointer;
  text-transform: uppercase;
  clear: both;
  color: white;
  border: 1px solid #ccc;
  background: gray;
  border-radius: 5px;
}

.text-trans-normal {
  text-transform: initial !important;
  /* border-bottom: 1px solid black; */
}

li.text-trans-normal {
  border-bottom: 1px solid black;
}

この場合、li:first-child を使用できることはわかっていますが、それができない別の理由があるため、ここで別の解決策を探します。

4

1 に答える 1

0

これは、 AngularJSを使用して解決するのが非常に簡単な問題です。

ng-class="{'selected' : ticker.selected, 'all-top-li' : ticker.ticker == 'All Top'}"

基本的に、ng-class条件付きの完全な ng 反復ブロックを使用します。

<ul ng-show="loadingTickersDone" class="tickers-list">
    <li ng-repeat="ticker in tickers"
        id="{{ticker.ticker}}"
        ng-hide="ticker.removed"
        ng-class="{'selected' : ticker.selected, 'all-top-li' : ticker.ticker == 'All Top'}">

        <div class="ticker"
             ng-click="unselectAll(); selectTicker('top', ticker); ticker.selected = !ticker.selected;"
             ng-class="{'text-trans-normal' : ticker.ticker == 'All'}"
             ng-if="ticker.ticker != 'All'"
             >
             {{ticker.ticker}}
        </div>

    </li>
</ul>
于 2015-06-29T18:14:06.783 に答える