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 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 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
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP中phar包的使用教程
2017/06/14 PHP
DOM相关内容速查手册
2007/02/07 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
SVG实现时钟效果
2018/07/17 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
python web框架 django wsgi原理解析
2019/08/20 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
Python3实现飞机大战游戏
2020/04/24 Python
PyTorch-GPU加速实例
2020/06/23 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
车工岗位职责
2013/11/26 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2014年教师学期工作总结
2014/11/08 职场文书