如何使用JavaScript类型的网页内= QUOT;文/ NG模板"? [英] How to use javascript inside a page with type="text/ng-template"?
问题描述
我有code是这样的:
I have code like this:
<script id="templates/orderdetails.html" type="text/ng-template">
<ion-view view-title="OrderDetails">
<ion-content class="padding">
<p>Here I want to display order details...</p>
{{ detail }}
<script type="text/javascript">
var obj = JSON.parse( {{ detail }} );
document.write('<table>');
document.write('<thead>');
document.write('<tr>');
document.write('<th>菜名</th><th>单价</th><th>份数</th><th>小计</th>');
document.write('</tr>');
document.write('</thead>');
document.write('<tbody>');
document.write('</tbody>');
document.write('</table>');
for(id in obj) {
document.write(obj[id]["name"]);
document.write(" ");
document.write(obj[id]["price"]);
document.write(" ");
document.write(obj[id]["num"]);
document.write(" ");
document.write(obj[id]["total"]);
document.write("<br>");
}
</script>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
</p>
</ion-content>
</ion-view>
</script>
我想{{详细}}被解析并显示如下所示:
这里输入链接的描述
但我发现JavaScript的不是内部组件&LT;脚本ID =模板/ orderdetails.html类型=文/ NG-模板&GT;
,如何我能做到这一点?谢谢你。
But I found javascript not working inside "<script id="templates/orderdetails.html" type="text/ng-template">
", How can I do that? Thanks.
推荐答案
您可以更好地添加以下表的HTML模板是这样的:
You can better add the following table-html to your template like this:
<table>
<thead>
<tr>
<th>菜名</th><th>单价</th><th>份数</th><th>小计</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="id in obj">
<td>{{name}}</td>
<td>{{price}}</td>
<td>{{num}}</td>
<td>{{total}}</td>
</tr>
</tbody>
</table>
伍重复会使你的obj变量为每个项目的necesarry表行。这之后,您需要在您的控制器来定义 $ scope.obj
因为你的角度应用将寻找。我认为这只是definig VAR OBJ
不工作,但我从来没有使用过这种方式。
Ng-Repeat will render the necesarry table rows for every item in your obj variable. After that you will need to define $scope.obj
in your controller since your angular app will look for that. I think that just definig var obj
is not working, but I have never used it that way.
这篇关于如何使用JavaScript类型的网页内= QUOT;文/ NG模板&QUOT;?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!