欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

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

时间:2021-02-05 09:37:39|栏目:AngularJS|点击:

前言

大家都知道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:"&nbsp;&nbsp;全国"},{id:1,text:"&nbsp;北京"},{id:20,text:"&nbsp;&nbsp;&nbsp;上海"},{id:3,text:"&nbsp;&nbsp;福建"},{id:4,text:"&nbsp;&nbsp;山东"}];
  $scope.value=20;
  $scope.testList=testList;
 }]);
</script>
</body>

可以看到,空格直接被渲染为&nbsp; 。一个简单粗暴的解决办法是修改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:"&nbsp;&nbsp;全国"},{id:1,text:"&nbsp;北京"},{id:20,text:"&nbsp;&nbsp;&nbsp;上海"},{id:3,text:"&nbsp;&nbsp;福建"},{id:4,text:"&nbsp;&nbsp;山东"}];
  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:"&nbsp;&nbsp;全国"},{id:1,text:"&nbsp;北京"},{id:20,text:"&nbsp;&nbsp;&nbsp;上海"},{id:3,text:"&nbsp;&nbsp;福建"},{id:4,text:"&nbsp;&nbsp;山东"}];
  $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>

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

总结

上一篇:浅谈Angularjs中不同类型的双向数据绑定

栏    目:AngularJS

下一篇:基于angular-utils-ui-breadcrumbs使用心得(分享)

本文标题:Angular.js中下拉框实现渲染html的方法

本文地址:http://www.codeinn.net/misctech/57553.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有