角NG绑定，HTML嵌套NG重复内 [英] Angular ng-bind-html inside a nested ng-repeat

问题描述

所以我有一个NG重复内的NG-重复。内NG重复引用项recipe.ingredients。问题是，每个这些项目具有不渲染，除非我用NG绑定，HTML特殊字符。但是，当我尝试使用NG-绑定-HTML这是行不通的。下面是HTML：

这工作，但不能正确显示特殊字符（分数配料测量）：

 ＆LT; D​​IV CLASS =行NG-重复=秘方配方中＆GT;
    ＆LT; H1类='标题'＆GT; {{recipe.title}}＆LT; / H1＆GT;
    ＆LT; D​​IV CLASS =COL-MD-5＆GT;
        ＆LT; D​​IV CLASS =列表组＆GT;
            ＆LT; D​​IV CLASS =列表标题＆​​GT;配料：LT; / DIV＆GT;
            ＆LT; p =类列表组项NG重复=，在recipe.ingredients项目＆GT; {{}项}＆LT; / P＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

我在尝试使用NG绑定，而不是HTML（不工作）：

 ＆LT; D​​IV CLASS =行NG-重复=秘方配方中＆GT;
    ＆LT; H1类='标题'＆GT; {{recipe.title}}＆LT; / H1＆GT;
    ＆LT; D​​IV CLASS =COL-MD-5＆GT;
        ＆LT; D​​IV CLASS =列表组＆GT;
            ＆LT; D​​IV CLASS =列表标题＆​​GT;配料：LT; / DIV＆GT;
            ＆LT; p =类列表组项NG重复= NG绑定-HTML =项＆GT在recipe.ingredients项目;其中p; / P＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

例如，在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

 ＆LT; D​​IV CLASS =行NG-重复=秘方配方中＆GT;
    ＆LT; H1类='标题'＆GT; {{recipe.title}}＆LT; / H1＆GT;
    ＆LT; D​​IV CLASS =COL-MD-5＆GT;
        ＆LT; D​​IV CLASS =列表组＆GT;
            ＆LT; D​​IV CLASS =列表标题＆​​GT;配料：LT; / DIV＆GT;
            ＆LT; p =类列表组项NG重复= NG绑定-HTML =trustAsHtml（项目）＆GT在recipe.ingredients项目;＆LT; / P＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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重复内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！