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",function () {
  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>

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

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

  1. angularjs下拉框空白

    搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" n ...

  2. angularjs 下拉框

    @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" ...

  3. php简易表单及下拉框动态渲染

    <?php//1.连接数据库$link = mysqli_connect('127.0.0.1','root','root','1906');//2.设置字符集mysqli_set_charse ...

  4. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  5. vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  6. 巧妙解决element-ui下拉框选项过多的问题

    1. 场景描述 不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好 用人会说element-ui的select有一 ...

  7. jquery动态生成的select下拉框，怎么设置默认的选中项？

    这两天都被这问题困扰,可能是我不太懂前端.我做layui表格行编辑,点击编辑按钮弹出layer,里边有一个民族的下拉框不能直接显示后台传过来的值.我把民族数组用jquery添加到了select里边,可 ...

  8. table样式的下拉框（angularjs）

    前言 虽然使用的技术比较老了,但是思想却还是适用于现在的vue等框架. 一:实现的样式 二:实现包括的功能点 1:下拉框内容是表格,类似于一个弹窗 表格内容最多六行,超出的显示滚动条,表头固定,可滚动 ...

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

    一.背景 对于select的下拉列表,像国家选择这样的功能,全世界那么多国家,一直拉滚动条多辛苦,眼睛也要盯着找,累!so,为优化用户体验,带查找功能的下拉框是非常非常有必要的.都知道jquery里有 ...

随机推荐

  1. google ip地址

    http://203.208.46.146 http://203.208.46.177 http://203.208.46.178 http://209.116.186.251 http://203. ...

  2. mui开发app之自定义事件以更新其他页内容

    我之前做过jquery mobile的开发,那还是前年的事情 在jquery mobile中,由于页面是存储在div[data-role=page]的dom中(jqmobile通过对data-role ...

  3. .net core CLI(创建VueJS||Angular结合的项目)

    net core cli 是快速创建模板项目 安装CLI 参考: https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.as ...

  4. [Monkey King]

    题目描述 在一个森林里住着N(N<=10000)只猴子.在一开始,他们是互不认识的.但是随着时间的推移,猴子们少不了争斗,但那只会发生在互不认识(认识具有传递性)的两只猴子之间.争斗时,两只猴子 ...

  5. hdu4614 Vases and Flowers 线段树+二分

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4614 题意: 给你N个花瓶,编号是0  到 N - 1 ,初始状态花瓶是空的,每个花瓶最多插一朵花. ...

  6. 通过winform+模拟登录实现快速一键登录到人才招聘网站

    之前为了便于人事部门招聘登录网站更简洁高效,免去每天频繁输网址.用户名.密码等相关登录信息,特基于winform+HttpWebRequest实现模拟请求登录,最终达到一键登录到招聘网站后台的效果. ...

  7. Gitlab使用Webhook实现Push代码自动部署

    1.Jenkins 安装完成以后,首先我们在Jenkins中需要安装一下,Gitlab Hook Plugin 插件: 2.插件安装完成我们创建任务,在任务重构建触发器下获取回调URL: 注意: 注意 ...

  8. 腾讯云更换yum源

    最近公司使用了云服务器代替了机房的一些服务器,然而选择了腾讯云,个人观点通过比较还是阿里云好了点,可能为了使用腾讯云的一些其他功能吧,书归正文. 由于腾讯的源网站经常挂,在我使用过的一台腾讯云主机的时 ...

  9. Azure Messaging-ServiceBus Messaging消息队列技术系列-索引篇

    Azure Messaging ServiceBus Messaging相关的技术系列,最近已经整理了不少了,统一做一个索引链接,置顶. 方便查找,并后续陆陆续续再增加. 学习消息队列技术,可以先看第 ...

  10. JBoss7 如何用脚本 启动 和 停止

    用脚本来启动/停止JBoss服务器,有助于开发部署的 自动执行,提高工作效率. 在JBoss以前的版本中,很容易在bin目录下面找到 启动和停止服务器的脚本: run.bat shutdown.bat ...