angularjs下拉框实现渲染html

   angualrjs处于安全的考虑,插值 指令会对相应字符串进行过滤,避免出现html攻击。但是在一些时候,我们需要渲染html,比如实现一个分级的下拉框,代码如下:

 1 <body ng-app="app" ng-controller="controller">
 2 <select ng-model="value" ng-options="t.text for t in testList"></select>
 3 <script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
 4 <script type="text/javascript">
 5     var app= angular.module("app",[]);
 6     app.controller("controller",["$scope",function ($scope) {
 7         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;山东"}];
 8         $scope.value=20;
 9         $scope.testList=testList;
10     }]);
11 </script>
12 </body>

可以看到,空格直接被渲染为&nbsp;。一个简单粗暴的解决办法是修改angularjs源代码,不再对html进行过滤,在angularjs源码中搜索updateOptions函数,直接对相应脚本进行替换,如下图:

    可以看到,空格已经被正确的渲染,这种方式虽然简单,但是修改将会影响到所有的下拉框控件,有可能会受到html攻击,一种比较中规中矩的办法是采用ng-bind-html来渲染html,这个时候下拉框绑定数据的方式也需要改变,相应代码如下:

 1 <body ng-app="app" ng-controller="controller">
 2 <select ng-module="value" >
 3     <option ng-repeat="data in testList"  value="{{data.id}}" ng-selected="data.id==value" ng-bind-html="data.text">
 4     </option>
 5 </select>
 6 <script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
 7 <script type="text/javascript">
 8    var app= angular.module("app",[]);
 9     app.controller("controller",["$scope","$sce",function ($scope,$sce) {
10         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;山东"}];
11         for(var i=0;i<testList.length;i++)
12         {
13             testList[i].text=$sce.trustAsHtml( testList[i].text);
14         }
15         $scope.value=‘20‘;//注意,此处必须为字符串类型,否则无法获取选中的值
16         $scope.testList=testList;
17
18     }]);
19
20 </script>
21 </body>

    这种方式非常消耗性能,对于数据量不大的下拉框,这种方式完全可以满足需要,但是如果数据量稍微大些,浏览器就会出现明显的卡顿现象,这个时候可以自己写一个指令来实现下拉框,代码如下:

 1 <body ng-app="app" ng-controller="controller">
 2 <drop-down-list d-list="testList" value="id" text="text" d-select-value="value" ></drop-down-list>
 3 {{value}}
 4 <script src="/bootstrap/bootstrap/dist/angular-bootstrap/angular.js"></script>
 5 <script type="text/javascript">
 6     var app= angular.module("app",[]);
 7     app.controller("controller",["$scope","$window",function ($scope,$window) {
 8         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;山东"}];
 9         $scope.value=20;
10         $scope.testList=testList;
11     }]);
12     app.directive("dropDownList",["$sce",function ($sce) {
13         return{
14             restrict:‘E‘,
15             scope :{
16                 dList:‘=‘,
17                 dSelectValue:‘=‘
18             } ,
19             link:function(scope, element, attrs) {
20                 var d=document;
21                 var value=attrs["value"];//对应option的value
22                 var text=attrs["text"];
23                 var selectValue=scope.dSelectValue;
24                 element.on("change",function(){
25                     var selectedIndex=this.selectedIndex;
26                     scope.$apply(function(){
27                         scope.dSelectValue=selectedIndex;
28                     });
29                 })
30
31                 for(var i=0;i<scope.dList.length;i++)
32                 {
33                     var option=d.createElement("option");
34                     option.value=scope.dList[i][value];
35                     option.innerHTML=scope.dList[i][text];
36                     if(selectValue==option.value)
37                     {
38                         option.setAttribute("selected",true);
39                     }
40                     element.append(option);
41                 }
42             },
43             template:‘<select></select>‘,
44             replace:true
45
46         };
47     }]);
48
49 </script>
50 </body>

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

时间: 2024-10-14 06:33:39

angularjs下拉框实现渲染html的相关文章

angularjs下拉框空白

搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: 1 <select class="form-control" ng-model="UserState" 2 ng-init="UserState=0"> 3 <option value="-1">选择状态</option> 4 <option value="0&q

angularJs下拉框

1 只是一个下拉框 <!-- <select ng-model="areaType" ng-disabled="isDisable" class="form-control" ng-options="c.code as c.code for c in codes"> --><!-- <option value="">---请选择---</option>

angularjs 下拉框

@{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width" /> <title>货位档案</title> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles

下拉框&quot;--请选择--&quot; 浏览器渲染不同造成页面初始化不一致

问题: 页面下拉框初始化时,展示"--请选择--" : 在Google.Firefox浏览器渲染正常,但在IE(低版本)浏览器下不展示. 修复: (1) 修改对应的*.js文件: 如: please_select: "--请选择--", //产品运输方式判断 var flag = false; $("#productDictionary option").each(function() { if($(this).val()===data.data

【经验】angularjs 实现带查找筛选功能的select下拉框

一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题. 分析:    目标 在原来的<select ng-options="">标签上新加一个属性 select-search 就能支持查找的功能.如果这个属性没起作用,也不影响原来的sele

Render Mode drop-down 渲染模式下拉框

Render Mode drop-down 渲染模式下拉框 RGB:渲染模式 RGB:三原色显示,RGB仅是作为正常渲染你游戏的所有颜色. Alpha:阿尔法通道显示,灰度图显示,阿尔法将渲染所有阿尔法值为了利用阿尔法值去精度调谐透明度或全屏效果. Overdraw:以半透明的方式显示物体,使用这种方式可以看到被遮挡的物体,重绘将表明屏幕被强制绘制多少次. Mipmaps:Mip映射图显示,使用颜色的方式来显示理想的纹理大小,红色意味着尺寸大于所需要的,(以当前场景分辨率和摄像机状态为参照),蓝

AngularJS: 使用ng-option生成下拉框,添加全部选择项

效果图如下: HTML代码: <div class="controls pull-left"> 消费类型: <select id="selectType" ng-model="currentType" ng-options="optiontype.id as optiontype.typeName for optiontype in typemodel"> </select> </di

angularJs实现下拉框多选

话不多说,直接上干货. 肯定需要下拉选插件.必须引入的是   注意 先后顺序 select2.css select2-bootstrap.css select2.min.js angular.min.js angular-select2.js ok,然后只需要写上一段代码就ok,如下 <input select2 select2-model="entity.brandIds" config="brandList" multiple placeholder=&q

JQuery打造下拉框联动效果

做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框所有清除,然后又一次拼接刷新的内容.用JQuery实现比較easy,代码以省市联动效果为例实现. JSP页面代码例如以下: <li id="base"> <p>生源地:</p> <label> <select id="