ng绑定html,变量名来自ng repeat,但在其他地方定义了变量
ng-bind-html with variable name coming from ng-repeat but variable defined elsewhere
嗨,我对angular很陌生,所以我不确定这是否是一个明显的答案,但我正试图通过ng repeat将一个变量分配给ng bind html。然而,当我通过ng重复angular添加变量时,它只显示变量名,因为它认为html内容来自我的ng重复数据,而不是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",并没有意识到它是一个变量。
提前感谢您的帮助。如果我能进一步澄清,请告诉我!
请尝试以下操作:
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"}
];
因此,将变量添加到数组中,而不是将变量的名称作为字符串。
您可以将html定义为对象品牌的密钥,直接在品牌之外使用它,而不是使其复杂化。
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>"
);
它只是一个数组元素的例子。
相关文章:
- AngularJs对ng消息的自定义替换
- 自定义指令中的AngularJS ng模型
- 与ng attr myCustomAttribute匹配的自定义属性指令
- 想要将ng个repeat对象传递给自定义筛选函数
- AngularJS ng下拉树结构的模型定义
- 为什么ng中的自定义指令在循环完成后重复运行
- 当ng repeat上的复选框具有必需的属性时,角度ng模型将变为未定义
- AngularJS ng repeat显示原型函数未定义
- 在 Angular 指令中定义一个用于 ng-click 的函数
- AngularJS -- 创建自定义数据绑定和 ng-repeat
- ng-select 选项在与自定义指令一起使用时加倍
- 角度:仅当选择脏时定义 ng 模型
- 如何仅在文本字段中有值时才将自定义过滤器应用于 ng-repeat
- 柱形图中每列的 ng-谷歌图表自定义颜色
- 更改ng包含或定义默认ui视图
- 错误:[ng:areq]参数'CompanyCtrl'不是函数,未定义
- 断言var集通过<输入ng模型>不是未定义的
- 更改控制器中ng重复中定义的变量的状态
- AngularJS自定义指令ng显示/ng隐藏
- 使用 ng-model 定义变量之间的区别,而不是通过 AngularJS 中的控制器定义变量