집 > 기사 > 웹 프론트엔드 > Angularjs 드롭다운 상자는 HTML 렌더링을 구현합니다.

Angularjs 드롭다운 상자는 HTML 렌더링을 구현합니다.

巴扎黑원래의: 2017-06-26 11:50:342154검색

　 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?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>

코드 보기

공백이 바로 로 렌더링되는 것을 볼 수 있습니다. 간단하고 무례한 해결책은 AngularJS 소스 코드를 수정하고 더 이상 HTML을 필터링하지 않고 AngularJS 소스 코드에서 UpdateOptions 함수를 검색하여 해당 스크립트를 직접 바꾸는 것입니다.

space가 올바릅니다. 이 방법은 간단하지만 수정하면 모든 드롭다운 상자 컨트롤에 영향을 미치고 HTML 공격을 받을 수 있습니다. 이때 더 만족스러운 방법은 ng-bind-html을 사용하여 HTML을 렌더링하는 것입니다. -down box isbound 데이터를 결정하는 방법도 변경해야 합니다. 해당 코드는 다음과 같습니다.

 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>

View Code

　　　이 방법은 a가 있는 드롭다운 상자의 경우 성능이 매우 많이 소모됩니다. 데이터 양이 적으면 이 방법으로 요구 사항을 완전히 충족할 수 있지만, 데이터 양이 약간 더 크면 브라우저에서 명백한 지연이 발생합니다. 이때 코드는 드롭다운 상자를 구현하는 명령을 작성할 수 있습니다.

 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>

코드 보기

이 방법은 해당 기능을 더 완벽하게 구현할 수 있으며 더 나은 선택입니다.

위 내용은 Angularjs 드롭다운 상자는 HTML 렌더링을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：WeChat Mini 프로그램 개발 경험 요약다음 기사：WeChat Mini 프로그램 개발 경험 요약