Home > Developer > JavaScript
Angular. js implements the html Rendering Method in the drop-down box. The angular. js drop-down box
Preface
As we all know, angualrjs is safe. The interpolation command filters corresponding strings to avoid html attacks. However, in some cases, we need to render html, such as implementing a hierarchical drop-down box.
The Code is as follows:
<Body ng-app = "app" ng-controller = "controller"> <select ng-model = "value" ng-options = "t. text for t in testList "> </select> <script src ="/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: "nationwide"}, {id: 1, text: "Beijing" },{ id: 20, text: "Shanghai" },{ id: 3, text: "Fujian" },{ id: 4, text: "Shandong"}]; $ scope. value = 20; $ scope. testList = testList;}]); </script> </body>
As you can see, spaces are directly rendered . A simple and crude solution is to modify the angularjs source code, no longer filter html, search in angularjs source codeupdateOptionsFunction, replace the script directly, for example:
As you can see, spaces have been correctly rendered. This method is simple, but modification will affect all the drop-down box controls and may be subject to html attacks. A more reasonable method is to useng-bind-htmlTo render html, the way to bind data to the drop-down box also needs to be changed. The corresponding code is as follows:
<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/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: "nationwide" },{ id: 1, text: "Beijing" },{ id: 20, text: "Shanghai" },{ id: 3, text: "Fujian" },{ id: 4, text: "Shandong"}]; for (var I = 0; I <testList. length; I ++) {testList [I]. text = $ sce. trustAsHtml (testList [I]. text);} $ scope. value = '20'; // note that the value must be of the string type. Otherwise, the selected value $ scope cannot be obtained. testList = testList;}]); </script> </body>
This method consumes a lot of performance. For a drop-down box with a small amount of data, this method can fully meet the needs. However, if the data volume is a little large, the browser will obviously experience freezing, in this case, you can write a command to implement the drop-down box. The Code is as follows:
<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/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: "nationwide" },{ id: 1, text: "Beijing" },{ id: 20, text: "Shanghai" },{ id: 3, text: "Fujian" },{ id: 4, text: "Shandong"}]; $ 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"]; // value var text = attrs ["text"] of the corresponding option; 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>
This method can perfectly implement the corresponding functions and is a good choice.
Summary
The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
