Angular.js中下拉框实现渲染html的方法

前言

创新互联公司专业为企业提供瑶海网站建设、瑶海做网站、瑶海网站设计、瑶海网站制作等企业网站建设、网页设计与制作、瑶海企业网站模板建站服务，十年瑶海做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

大家都知道angualrjs处于安全的考虑，插值 指令会对相应字符串进行过滤，避免出现html攻击。但是在一些时候，我们需要渲染html，比如实现一个分级的下拉框

代码如下：

可以看到，空格直接被渲染为  。一个简单粗暴的解决办法是修改angularjs源代码，不再对html进行过滤，在angularjs源码中搜索updateOptions函数，直接对相应脚本进行替换，如下图：

可以看到，空格已经被正确的渲染，这种方式虽然简单，但是修改将会影响到所有的下拉框控件，有可能会受到html攻击，一种比较中规中矩的办法是采用ng-bind-html来渲染html，这个时候下拉框绑定数据的方式也需要改变，相应代码如下：

这种方式非常消耗性能，对于数据量不大的下拉框，这种方式完全可以满足需要，但是如果数据量稍微大些，浏览器就会出现明显的卡顿现象，这个时候可以自己写一个指令来实现下拉框，代码如下：

{{value}}

这种方式可以比较完美的实现相应功能，是一种较好的选择。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对创新互联的支持。