您的位置：首页 > 编程技术 > js  >  Angular.js中下拉框实现渲染html的方法

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

 更新时间：2017年6月24日 10:00  点击：2752

前言

大家都知道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函数，直接对相应脚本进行替换，如下图：

                 

可以看到，空格已经被正确的渲染，这种方式虽然简单，但是修改将会影响到所有的下拉框控件，有可能会受到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>

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

总结

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

[!--infotagslink--]

相关文章

  • jQuery 自定义下拉框(DropDown)附源码下载

    这篇文章主要介绍了jQuery 自定义下拉框(DropDown)的相关资料,需要的朋友可以参考下...2016-07-29

  • js实现可输入可选择的select下拉框

    这篇文章主要为大家详细介绍了js实现可输入可选择的select下拉框，可及时匹配包含输入的内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-09

  • Select下拉框模糊查询功能实现代码

    这篇文章主要介绍了Select下拉框模糊查询功能实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-29

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

    这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。...2017-06-24

  • jQuery实现下拉框功能实例代码

    这篇文章主要介绍了jQuery实现下拉框功能实例代码的相关资料,需要的朋友可以参考下...2016-05-09

  • yii2带搜索功能的下拉框实例详解

    带搜索功能下拉框在项目中经常会用到，下面小编把实现代码分享到脚本之家平台，供大家参考...2016-05-13

  • angular.js指令中transclude选项及ng-transclude指令详解

    这篇文章主要研究一下如何使用ng-transclude指令,以及指令的transclude选项的相关资料，文中介绍的非常详细，并给出了完整的示例代码大家参考学习，需要的朋友们下面来一起看看吧。...2017-05-27

  • jQuery实现下拉框左右移动（全部移动，已选移动）

    本文主要介绍jQuery中利用appendTo()方法追加元素已实现左右移动的功能，希望对大家有所帮助。...2016-04-18

  • Angular2中Bootstrap界面库ng-bootstrap详解

    不知道大家有没有留意，最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ， 因此对这个ng-bootstrap 也是很感兴趣，所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。...2016-10-20

  • javascript中select下拉框的用法总结

    这篇文章主要为大家介绍了javascript中select下拉框的用法，select在开发中经常被用到，用于进行选项选择,需要的朋友可以参考下...2016-01-08

  • Angular.js基础学习之初始化

    这篇文章主要介绍了Angular.js基础学习之初始化的相关资料，AngularJS 启动有两种方式，一种是绑定初始化，自动加载，另外一种是手动初始化，文中介绍的很详细，需要的朋友可以参考下。...2017-03-13

  • Angular.js指令学习中一些重要属性的用法教程

    这篇文章主要给大家介绍了关于Angular.js指令学习中一些重要属性的用法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。...2017-05-27

  • jQuery插件实现可输入和自动匹配的下拉框

    这篇文章主要为大家详细介绍了jQuery插件实现可输入和自动匹配的下拉框,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-25

  • Angular.js中ng-if、ng-show和ng-hide的区别介绍

    angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。那么这篇文章就给大家主要介绍了Angular.js中ng-if、ng-show和ng-hide的区别，需要的朋友可以参考借鉴，下面来一起看看吧。...2017-01-23

  • Yii2实现上下联动下拉框功能的方法

    这篇文章主要介绍了Yii2实现上下联动下拉框功能的方法,简单分析了上下联动下拉框功能的概念、原理与实现技巧,需要的朋友可以参考下...2016-08-27

  • jQuery自定义多选下拉框效果

    这篇文章主要为大家详细介绍了jQuery自定义多选下拉框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-06-24

  • thinkphp实现把数据库中的列的值存到下拉框中的方法

    本文主要介绍了thinkphp把数据库中的列的值存到下拉框中的方法。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-25

  • AngularJS ng-repeat数组有重复值的解决方法

    不知道大家是否遇到过这个问题，在当Angular.JS ng-repeat数组中有重复项时，系统就会抛出异常，这是该怎么做？本文通过示例代码介绍了详细的解决方法，有需要的朋友们可以参考借鉴，下面来一起看看吧。...2016-10-25

  • 利用Angular+Angular-Ui实现分页（代码加简单）

    这篇文章主要介绍了利用Angular+Angular-Ui实现分页，利用Angular+Angular-Ui实现的分页分页代码更加简单，更加容易懂哦，相信本文的内容对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。...2017-03-13

  • Angular.js如何从PHP读取后台数据

    这篇文章主要为大家简单介绍了Angular.js如何从PHP读取后台数据，本文将Angular和PHP相结合，从后台读取数据，感兴趣的小伙伴们可以参考一下...2016-03-28