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函数的重载
Sep 22 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
javascript 数组操作详解
Jan 29 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
react基本安装与测试示例
Apr 27 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学习笔记(毕业设计)
2012/02/21 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
人事部岗位职责范本
2014/03/05 职场文书
医院员工辞职信范文
2015/05/12 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
python画条形图的具体代码
2022/04/20 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python