Angularjs drop-down box implements rendering html-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Angularjs drop-down box implements rendering html

巴扎黑

Jun 26, 2017 am 11:50 AM

angularjs html javascript drop down accomplish rendering

angualrjs is for security reasons. The interpolation command will filter the corresponding string to avoid HTML attacks. But sometimes, we need to render HTML, such as implementing a hierarchical drop-down box. The code is as follows:

 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?1.1.11"></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:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}]; 8         $scope.value=20; 9         $scope.testList=testList;10     }]);11 </script>12 </body>

Copy after login

View Code

You can see that spaces are directly rendered as . A simple and crude solution is to modify the angularjs source code, no longer filter the html, search for the updateOptions function in the angularjs source code, and directly replace the corresponding script, as shown below:

It can be seen that spaces have been rendered correctly. Although this method is simple, the modification will affect all drop-down box controls and may be subject to HTML attacks. A more satisfactory method is to use ng-bind- html to render html. At this time, the way the drop-down box binds data also needs to be changed. The corresponding code is as follows:

 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?1.1.11"></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:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}];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>

Copy after login

View Code

This method consumes a lot of performance. For drop-down boxes with a small amount of data, this method can fully meet the needs. However, if the amount of data is slightly larger, the browser will have obvious lags. At this time, You can write a command yourself to implement the drop-down box. The code is as follows:

 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?1.1.11"></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:"  全国"},{id:1,text:" 北京"},{id:20,text:"   上海"},{id:3,text:"  福建"},{id:4,text:"  山东"}]; 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的value22                 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:&#39;<select></select>',44             replace:true45 46         };47     });48 49 </script>50 </body>

Copy after login

View Code

This method can achieve the corresponding function more perfectly and is a better choice.

The above is the detailed content of Angularjs drop-down box implements rendering html. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn