al2593 al2593 - 6 months ago 14
AngularJS Question

How can I evaluate a variable from an AngularJS controller inside an html?

I want to show a different image depending on the value of libro.isAvailable

<tr ng-repeat="libro in misLibros">
<td>{{libro.titulo}}</td>
<td>{{libro.autor}}</td>
<td id="isAvailable"></td>
<SCRIPT>
if(libro.isAvailable== true) {
document.getElementById("isAvailable").innerHTML = "<img src=\"../resources/v.png\" style=\"width: 1.5em;\">" }
else{
document.getElementById("isAvailable").innerHTML = "<img src=\"../resources/x.png\" style=\"width: 1.5em;\">"
}

</SCRIPT>
</tr>


but when I load the page the chrome console shows:
profilepage.html:102 Uncaught ReferenceError: libro is not defined

The other fields are displayed correctly. How can work with the variable inside of the script? Or there is another way to do this?

Answer

One of the advantages of angular is you don't need to access controller variables through scripts in most situations.

With that said, use ng-if

<tr ng-repeat="libro in misLibros">
     <td>{{libro.titulo}}</td>
     <td>{{libro.autor}}</td>
     <td id="isAvailable" ng-if="libro.isAvailable"><img src="../resources/v.png" style="width: 1.5em;"></td>
     <td id="isAvailable" ng-if="!libro.isAvailable"><img src="../resources/x.png" style="width: 1.5em;"></td>
</tr>