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中apply方法的使用详细解析
Nov 04 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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 文件状态缓存带来的问题
2008/12/14 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python正则表达式如何匹配中文
2020/05/27 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
单位消防安全制度
2014/01/12 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
出生证明范本
2015/06/15 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
golang生成并解析JSON
2022/04/14 Golang