本文介绍了角NG绑定,HTML嵌套NG重复内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

这工作,但不能正确显示特殊字符(分数配料测量):

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

我在尝试使用NG绑定,而不是HTML(不工作):

 < D​​IV CLASS =行NG-重复=秘方配方中>
    < H1类='标题'> {{recipe.title}}< / H1>
    < D​​IV CLASS =COL-MD-5>
        < D​​IV CLASS =列表组>
            < D​​IV CLASS =列表标题&​​GT;配料: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

 < D​​IV CLASS =行NG-重复=秘方配方中>
    < H1类='标题'> {{recipe.title}}< / H1>
    < D​​IV CLASS =COL-MD-5>
        < D​​IV CLASS =列表组>
            < D​​IV CLASS =列表标题&​​GT;配料: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",
                "&frac12; cup butter or margarine, melted",
                "2 cups shredded Cheddar cheese",
                "&frac13; cup chopped green onion",
                "1 pint sour cream",
                "&frac14; teaspoon pepper",
                "&frac12; teaspoon salt"
            ],
            directions: [
                "Oven 350&#176;",
                "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重复内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 03:57