javascript - 如何在 html 中评估来自 AngularJS Controller 的变量？

Question

我想根据 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>

但是当我加载页面时，chrome 控制台显示: profilepage.html:102 Uncaught ReferenceError: libro 未定义

其他字段显示正确。如何使用脚本中的变量？或者还有另一种方法可以做到这一点？

Answer 1

angular 的优点之一是在大多数情况下您不需要通过 javascript 访问 DOM。

话虽如此，使用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>