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 回答