javascript - 将 CSS 应用于 ng-repeat 中的唯一 li

Question

我想更改 ng-repeat 中特定 li 的 CSS 属性，循环:

<li id="cmmnt{{$index}}" ng-repeat="comment in ad.comments | orderBy : sortComment : true">
          <div class="commentTextArea">
            <p id="commentText">{{comment.text | limitTo: 100 }}</p>
           <a ng-click="changeEm('cmmnt'+$index)" ng-show="comment.text.length>=10"> {{moreLessText}}
            <i class="fa fa-angle-down"  style="color: #ee4a4a;"></i>
           </a>
          </div>
      </li>
    </ul>

ng-click="changeEm('cmmnt'+$index)" 需要改变 li< 的高度(style.maxHeight)/通过 ID。这是函数:

$scope.changeEm = function(liElement){ document.getElementById("'liElement'").style.maxHeight ="1em;!important";}

在 console.log() 中，'liElement' 只是一个字符串，我无法通过 document.getElementById("'liElement'")

谢谢。

Answer 1

您正在使用一个字符串作为变量，而不是您传递给函数的变量。我不推荐这种方法，但您可以通过更改此方法来修复它:

document.getElementById("'liElement'")

为此:

document.getElementById(liElement)

我推荐的方法是改用 ng-class:

<li id="cmmnt{{$index}}" 
    ng-class="{ 'active': comment.clicked }"
    ng-repeat="comment in ad.comments | orderBy : sortComment : true">
    <div class="commentTextArea">
        <p class="commentText">{{comment.text | limitTo: 100 }}</p>
        <a ng-click="changeEm(comment)" ng-show="comment.text.length>=10"> {{moreLessText}}
            <i class="fa fa-angle-down" style="color: #ee4a4a;"></i>
        </a>
    </div>
</li>

并在您的 changeEm 函数中:

$scope.changeEm = function(comment) {
    comment.clicked = true;
}

然后你可以在你的 css 中使用 'active' 类:

/* the 'p' in non-clicked 'li' */
li p.commentText {
    max-height: 10px;
}
/* the 'p' in a clicked 'li' */
li.active p.commentText {
    max-height: auto;
}