快捷導(dǎo)航

Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法

更新時(shí)間：2017年06月18日 14:23:19 作者：大朋展翅

這篇文章主要給大家介紹了關(guān)于在Angular.js中下拉框?qū)崿F(xiàn)渲染html的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。

前言

大家都知道angualrjs處于安全的考慮，插值指令會(huì)對(duì)相應(yīng)字符串進(jìn)行過(guò)濾，避免出現(xiàn)html攻擊。但是在一些時(shí)候，我們需要渲染html，比如實(shí)現(xiàn)一個(gè)分級(jí)的下拉框

代碼如下：

<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;全國(guó)"},{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>

可以看到，空格直接被渲染為  。一個(gè)簡(jiǎn)單粗暴的解決辦法是修改angularjs源代碼，不再對(duì)html進(jìn)行過(guò)濾，在angularjs源碼中搜索updateOptions函數(shù)，直接對(duì)相應(yīng)腳本進(jìn)行替換，如下圖：

可以看到，空格已經(jīng)被正確的渲染，這種方式雖然簡(jiǎn)單，但是修改將會(huì)影響到所有的下拉框控件，有可能會(huì)受到html攻擊，一種比較中規(guī)中矩的辦法是采用ng-bind-html來(lái)渲染html，這個(gè)時(shí)候下拉框綁定數(shù)據(jù)的方式也需要改變，相應(yīng)代碼如下：

<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;全國(guó)"},{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';//注意，此處必須為字符串類(lèi)型，否則無(wú)法獲取選中的值
  $scope.testList=testList;
 
 }]);

</script>
</body>

這種方式非常消耗性能，對(duì)于數(shù)據(jù)量不大的下拉框，這種方式完全可以滿(mǎn)足需要，但是如果數(shù)據(jù)量稍微大些，瀏覽器就會(huì)出現(xiàn)明顯的卡頓現(xiàn)象，這個(gè)時(shí)候可以自己寫(xiě)一個(gè)指令來(lái)實(shí)現(xiàn)下拉框，代碼如下：

<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;全國(guó)"},{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"];//對(duì)應(yīng)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>

這種方式可以比較完美的實(shí)現(xiàn)相應(yīng)功能，是一種較好的選擇。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: