- 首页
- 其他开发
- 嵌套 ng-repeat 中的 Angular ng-bind-html
嵌套 ng-repeat 中的 Angular ng-bind-html
[英] Angular ng-bind-html inside a nested ng-repeat
本文介绍了嵌套 ng-repeat 中的 Angular ng-bind-html的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在 ng-repeat 中有一个 ng-repeat.内部 ng-repeat 引用recipe.ingredients 中的项目".问题是这些项目"中的每一个都有特殊字符，除非我使用 ng-bind-html，否则它们不会呈现.但是当我尝试使用 ng-bind-html 时它不起作用.这是html:
这有效，但不能正确显示特殊字符(成分测量的分数):
<h1 class='title'>{{ recipe.title }} </h1><div class="col-md-5"><div class="list-group"><div class="list-title">成分</div><p class="list-group-item" ng-repeat="recipe.ingredients 中的项目">{{item}}</p>
我尝试使用 ng-bind-html 代替(不起作用):
<h1 class='title'>{{ recipe.title }} </h1><div class="col-md-5"><div class="list-group"><div class="list-title">成分</div><p class="list-group-item" ng-repeat="recipe.ingredients 中的项目" ng-bind-html="item"></p>
ng-repeat 中的项目"示例:
<代码> {编号:1，img: "图片/beefThumbnail.jpg",标题:土豆至尊"，份量:份量:8 - 10"，配料: [6 个中等大小的土豆，去皮"，盐"，½ 杯黄油或人造黄油，融化"，2 杯切达干酪丝"，⅓杯葱花"，1品脱酸奶油"，"¼ 茶匙胡椒粉",½ 茶匙盐"],方向: ["烤箱 350°",将土豆放入沸盐水中煮至熟"，第二天粗磨土豆"，与剩余成分混合"，放入 1.5 或 2 夸脱的浅烤盘中，烘烤约 35 分钟"]},//结束土豆至上解决方案
使用$sce，也不要忘记注入控制器
JS
$scope.trustAsHtml = $sce.trustAsHtml
然后在 HTML 中
<h1 class='title'>{{ recipe.title }} </h1><div class="col-md-5"><div class="list-group"><div class="list-title">成分</div><p class="list-group-item" ng-repeat="recipe.ingredients 中的项目" ng-bind-html="trustAsHtml(item)"></p>
So I have an ng-repeat within an ng-repeat. The inner ng-repeat references "item in recipe.ingredients". The problem is that each of these "items" have special characters which don't render unless I use ng-bind-html. But when I attempt to use ng-bind-html it doesn't work. Here is the html:
This works but doesn't display the special characters correctly (fractions for ingredients measurements):
<div class="row" ng-repeat="recipe in recipes">
<h1 class='title'> {{ recipe.title }} </h1>
<div class="col-md-5">
<div class="list-group">
<div class="list-title">Ingredients</div>
<p class="list-group-item" ng-repeat="item in recipe.ingredients">{{item}}</p>
</div>
</div>
</div>
My attempt at using ng-bind-html instead (which doesn't work):
<div class="row" ng-repeat="recipe in recipes">
<h1 class='title'> {{ recipe.title }} </h1>
<div class="col-md-5">
<div class="list-group">
<div class="list-title">Ingredients</div>
<p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="item"></p>
</div>
</div>
</div>
example of an "item" in the ng-repeat:
{
id: 1,
img: "images/beefThumbnail.jpg",
title: "Potatoes Supreme",
servings: "Servings: 8 - 10",
ingredients: [
"6 medium potatoes, peeled",
"Salt",
"½ cup butter or margarine, melted",
"2 cups shredded Cheddar cheese",
"⅓ cup chopped green onion",
"1 pint sour cream",
"¼ teaspoon pepper",
"½ teaspoon salt"
],
directions: [
"Oven 350°",
"Cook potatoes in boiling salted water until done",
"The next day grate potatoes coarsely",
"Mix with remaining ingredients",
"Place in shallow 1.5 or 2 quart baking dish and bake about 35 minutes"
]
},//end potatoesSupreme
解决方案
Use $sce, also don't forget to inject it into controller
JS
$scope.trustAsHtml = $sce.trustAsHtml
Then in HTML
<div class="row" ng-repeat="recipe in recipes">
<h1 class='title'> {{ recipe.title }} </h1>
<div class="col-md-5">
<div class="list-group">
<div class="list-title">Ingredients</div>
<p class="list-group-item" ng-repeat="item in recipe.ingredients" ng-bind-html="trustAsHtml(item)"></p>
</div>
</div>
</div>
这篇关于嵌套 ng-repeat 中的 Angular ng-bind-html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
