CODEWITHSUNDEEP
javascripthtmlcssangularjs
Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

Apply CSS to a unique li inside ng-repeat

I want to change CSS properties for a specific li inside ng-repeat, the loop: 

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

the ng-click="changeEm('cmmnt'+$index)" need to change the height(style.maxHeight) of the liby ID. here is the function:

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

In the console.log() for 'liElement' is just a string and I cant find it by document.getElementById("'liElement'")

Thanks.

Upvotes: 1

Views: 481

Answers (2)

Itsik Mauyhas
Itsik Mauyhas

Reputation: 3984

The answer was very simple, I just add ng-class:

<div class="commentTextArea">
            <p id="commentText" ng-class="comment.active==true?'visable':'notVisable'">{{comment.text}}</p>
          </div>

and the function : 

$scope.changeEm = function(comment){
                    console.log(comment);
                    comment.active = true;
                }

finally the match CSS:

.visable {
    height: 6.5em !important;
    overflow: visible!important;
}
.notVisable{
    overflow: hidden!important;
}

Hopes that helps someone!

Upvotes: 0

devqon
devqon

Reputation: 13997

You are using a string as variable instead of the variable you pass into the function. I wouldn't recommend this approach, but you can fix it by changing this:

document.getElementById("'liElement'")

to this:

document.getElementById(liElement)

The approach I would recommend is to use ng-class instead:

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

and in your changeEm function:

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

Then you can use the 'active' class in your css:

/* 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;
}

Upvotes: 1

Related Questions