ng-bind-html 变量名来自 ng-repeat 但变量在别处定义

Question

嗨，我是 angular 的新手，所以我不确定这是否是一个明显的答案，但我正在尝试通过 ng-repeat 将变量分配给 ng-bind-html.但是，当我通过 ng-repeat 添加变量时，angular 仅显示变量名称，因为它认为 html 内容来自我的 ng-repeat 数据，而不是 angular 中的其他地方。

我的html:

<div class="brandInfo" ng-repeat="brand in itemPage.brandinfo" ng-click="widgetExpanded = !widgetExpanded">
    <div class="icon-wrapper">    
        <img ng-src="assets/img/icons/{{brand.icon}}"/>             
    </div>
    <p> {{brand.title}} </p>
    <div ng-slide-down="widgetExpanded" duration=".5">
        <p ng-bind-html="brand.iconClass"></p>
   </div>
</div>

我的控制器：

vm.brandinfo = [
                    {icon: "organicCotton.svg", iconClass: "organicCotton", title: "Organic Cotton"},
                    {icon: "lowImpactDye.svg", iconClass: "lowImpactDye", title: "Low Impact Dyes"},
                    {icon: "factory.svg", iconClass: "factory", title: "Regulated Factory"},
                    {icon: "carbonFootprint.svg", iconClass: "carbonFootprint", title: "Sustainable Business Practices"}
                ];

$scope.organicCotton = $sce.trustAsHtml(

            "<ul><li>Uses no pesticides or herbicides which a often toxic to humans and the environment</li> \
            <li>Conventional cotton accounts for 25% of global pesticide usage</li> \
            <li> Organic farming practices create healthy soils which make better use of water inputs and are more resilient in drought conditions</li> \
            <li> The water pollution impact of organic has been shown to be 98% less than non-organic cotton production.</li></ul>"

                );

所以基本上我为所有 iconClass 可能性设置了这些范围变量，即使我可以将正确的变量名称 (brand.iconClass) 放入 ng-bind-html 指令中。它只评估为 "organicCotton" 并且不承认它是一个变量。

在此先感谢您的帮助。让我知道是否可以进一步澄清！

Answer 1

请试试这个：

vm.organicCotton = $sce.trustAsHtml(

        "<ul><li>Uses no pesticides or herbicides which a often toxic to humans and the environment</li> \
        <li>Conventional cotton accounts for 25% of global pesticide usage</li> \
        <li> Organic farming practices create healthy soils which make better use of water inputs and are more resilient in drought conditions</li> \
        <li> The water pollution impact of organic has been shown to be 98% less than non-organic cotton production.</li></ul>"

            );

vm.brandinfo = [
                {icon: "organicCotton.svg", iconClass: vm.organicCotton, title: "Organic Cotton"},
                {icon: "lowImpactDye.svg", iconClass: vm.lowImpactDye, title: "Low Impact Dyes"},
                {icon: "factory.svg", iconClass: vm.factory, title: "Regulated Factory"},
                {icon: "carbonFootprint.svg", iconClass: vm.carbonFootprint, title: "Sustainable Business Practices"}
            ];

因此，将变量添加到数组中，而不是将变量名称作为字符串。

Answer 2

您可以将html定义为对象brand的键，直接在brand之外使用它，而不是将其复杂化。

vm.brandinfo = [
                {icon: "organicCotton.svg", iconClass: "organicCotton", title: "Organic Cotton"},
                {icon: "lowImpactDye.svg", iconClass: "lowImpactDye", title: "Low Impact Dyes"},
                {icon: "factory.svg", iconClass: "factory", title: "Regulated Factory"},
                {icon: "carbonFootprint.svg", iconClass: "carbonFootprint", title: "Sustainable Business Practices"}
            ];

vm.brandInfo[0].iconClass = $sce.trustAsHtml(

        "<ul><li>Uses no pesticides or herbicides which a often toxic to humans and the environment</li> \
        <li>Conventional cotton accounts for 25% of global pesticide usage</li> \
        <li> Organic farming practices create healthy soils which make better use of water inputs and are more resilient in drought conditions</li> \
        <li> The water pollution impact of organic has been shown to be 98% less than non-organic cotton production.</li></ul>"

            );

它只是一个数组元素的示例。

ng-bind-html 变量名来自 ng-repeat 但变量在别处定义

ng-bind-html with variable name coming from ng-repeat but variable defined elsewhere

javascript

angularjs

angularjs-scope

angularjs-ng-repeat

ng-bind-html