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


Posted in Javascript onJune 18, 2017

前言

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

代码如下:

<body ng-app="app" ng-controller="controller">
<select ng-model="value" ng-options="t.text for t in testList"></select>
<script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
<script type="text/javascript">
 var app= angular.module("app",[]);
 app.controller("controller",["$scope",function ($scope) {
  var testList=[{id:0,text:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];
  $scope.value=20;
  $scope.testList=testList;
 }]);
</script>
</body>

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

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

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

<body ng-app="app" ng-controller="controller">
<select ng-module="value" >
 <option ng-repeat="data in testList" value="{{data.id}}" ng-selected="data.id==value" ng-bind-html="data.text">
 </option>
</select>
<script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
<script type="text/javascript">
 var app= angular.module("app",[]);
 app.controller("controller",["$scope","$sce",function ($scope,$sce) {
  var testList=[{id:0,text:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];
  for(var i=0;i<testList.length;i++)
  {
   testList[i].text=$sce.trustAsHtml( testList[i].text);
  }
  $scope.value='20';//注意,此处必须为字符串类型,否则无法获取选中的值
  $scope.testList=testList;
 
 }]);

</script>
</body>

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

<body ng-app="app" ng-controller="controller">
<drop-down-list d-list="testList" value="id" text="text" d-select-value="value" ></drop-down-list>
{{value}}
<script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
<script type="text/javascript">
 var app= angular.module("app",[]);
 app.controller("controller",["$scope","$window",function ($scope,$window) {
  var testList=[{id:0,text:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];
  $scope.value=20;
  $scope.testList=testList;
 }]);
 app.directive("dropDownList",function () {
  return{
   restrict:'E',
   scope :{
    dList:'=',
    dSelectValue:'='
   } ,
   link:function(scope, element, attrs) {
    var d=document;
    var value=attrs["value"];//对应option的value
    var text=attrs["text"];
    var selectValue=scope.dSelectValue;
    element.on("change",function(){
     var selectedIndex=this.selectedIndex;
     scope.$apply(function(){
      scope.dSelectValue=selectedIndex;
     });
    })

    for(var i=0;i<scope.dList.length;i++)
    {
     var option=d.createElement("option");
     option.value=scope.dList[i][value];
     option.innerHTML=scope.dList[i][text];
     if(selectValue==option.value)
     {
      option.setAttribute("selected",true);
     }
     element.append(option);
    }
   },
   template:'<select></select>',
   replace:true

  };
 });

</script>
</body>

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

总结

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

Javascript 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
JavaScript对象学习小结
Sep 02 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 #Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 #Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 #Javascript
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
vue router路由嵌套不显示问题的解决方法
Jun 17 #Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 #Javascript
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
ubuntu系统下 python链接mysql数据库的方法
2017/01/09 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
销售工作岗位职责
2013/12/24 职场文书
咖啡店创业计划书
2014/08/15 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书