Maison > Article > interface Web > La liste déroulante Angularjs implémente le rendu HTML

La liste déroulante Angularjs implémente le rendu HTML

巴扎黑original: 2017-06-26 11:50:342155parcourir

Angualrjs l'est pour des raisons de sécurité. La commande d'interpolation filtrera la chaîne correspondante pour éviter les attaques HTML. Mais parfois, nous devons restituer du HTML, par exemple en implémentant une liste déroulante hiérarchique. Le code est le suivant :

 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>

View. Code

Vous pouvez voir que les espaces sont directement rendus sous forme de . Une solution simple et grossière consiste à modifier le code source d'angularjs, à ne plus filtrer le html, à rechercher la fonction updateOptions dans le code source d'angularjs, et à remplacer directement le script correspondant, comme indiqué ci-dessous : 🎜> On voit que les espaces ont a été rendu correctement. Bien que cette méthode soit simple, la modification affectera tous les contrôles des listes déroulantes et peut être sujette à des attaques HTML. Une méthode plus satisfaisante consiste à utiliser ng-bind-html pour rendre le HTML à ce stade. la liste déroulante lie les données doit également être modifiée. Le code correspondant est le suivant :

Afficher le code

 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>

Cette méthode consomme beaucoup de performances. Pour les listes déroulantes avec une petite quantité de données, cette méthode peut pleinement répondre aux besoins. Cependant, si la quantité de données est légèrement plus importante, le navigateur aura des décalages évidents. . À ce stade, vous pouvez écrire vous-même une commande pour implémenter la liste déroulante. Le code est le suivant :

View. Code

 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>

Cette méthode peut réaliser la fonction correspondante plus parfaitement et constitue un meilleur choix.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé de l'expérience de développement de programmes WeChat MiniArticle suivant：Résumé de l'expérience de développement de programmes WeChat Mini

Articles Liés

Voir plus