问题描述
所以我有一个NG重复内的NG-重复。内NG重复引用项recipe.ingredients。问题是,每个这些项目具有不渲染,除非我用NG绑定,HTML特殊字符。但是,当我尝试使用NG-绑定-HTML这是行不通的。下面是HTML:
这工作,但不能正确显示特殊字符(分数配料测量):
< DIV CLASS =行NG-重复=秘方配方中>
< H1类='标题'> {{recipe.title}}< / H1>
< DIV CLASS =COL-MD-5>
< DIV CLASS =列表组>
< DIV CLASS =列表标题>配料:LT; / DIV>
< p =类列表组项NG重复=,在recipe.ingredients项目> {{}项}< / P>
< / DIV>
< / DIV>
< / DIV>
我在尝试使用NG绑定,而不是HTML(不工作):
< DIV CLASS =行NG-重复=秘方配方中>
< H1类='标题'> {{recipe.title}}< / H1>
< DIV CLASS =COL-MD-5>
< DIV CLASS =列表组>
< DIV CLASS =列表标题>配料:LT; / DIV>
< p =类列表组项NG重复= NG绑定-HTML =项&GT在recipe.ingredients项目;其中p; / P>
< / DIV>
< / DIV>
< / DIV>
例如,在NG-重复一个项目的:
{
ID:1,
IMG:图像/ beefThumbnail.jpg
标题:土豆苏preME
份量:份量:8 - 10
配料:
6中等土豆去皮
盐,
&放大器; frac12;杯黄油或人造黄油,融化
2杯切碎切达干酪
&放大器; frac13;杯葱花,
1品脱酸奶油,
&放大器; frac14;茶匙辣椒
&放大器; frac12;茶匙盐
]
路线:
烤箱350安培;#176;,
煮土豆沸腾的盐水,直到完成,
第二天篦土豆粗,
混合与其余成分,
将在浅水1.5或2夸脱烤盘,烤约35分钟
]
} //结束potatoesSu preME
使用$ SCE,也不要忘了将它注入到控制器
JS
$ scope.trustAsHtml = $ sce.trustAsHtml
然后在HTML
< DIV CLASS =行NG-重复=秘方配方中>
< H1类='标题'> {{recipe.title}}< / H1>
< DIV CLASS =COL-MD-5>
< DIV CLASS =列表组>
< DIV CLASS =列表标题>配料:LT; / DIV>
< p =类列表组项NG重复= NG绑定-HTML =trustAsHtml(项目)&GT在recipe.ingredients项目;< / P>
< / DIV>
< / DIV>
< / DIV>
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绑定,HTML嵌套NG重复内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!