Question

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

我正在尝试为包含div的div添加边框样式某些班级。在这种情况下.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，但还有另一个原因我不能这样做，所以在这里寻找不同的解决方案。

Answer 1

使用 AngularJS

解决这个问题非常简单

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

基本上使用ng-class有条件的完整重复块：

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

如何使用Angular语法从子div中设置父li的样式？

1 个答案: