javascript - custom html content in data-ng-options -
here code. i'm loading options in select controller data-ng-options, want add icon these items. example want add <span class="fa fa-plus"></span>
@ end of each option
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myapp" ng-controller="myctrl"> <select ng-model="selectedname" ng-options="item item in names"> </select> </div> <script> var app = angular.module('myapp', []); app.controller('myctrl', function($scope) { $scope.names = ["emil", "tobias", "linus"]; }); </script> <p>in above list need icon @ end of eact option</p> </body> </html>
you can use $sce
of ngsanitize
module this
var app = angular.module('myapp', ["ngsanitize"]); app.controller('myctrl', function($scope, $sce) { $scope.names = ["emil <i class='material-icons'></i>", "tobias <i class='material-icons'></i>", "linus <i class='material-icons'></i>" ]; }); app.filter('unsafe', function($sce) { return $sce.trustashtml; });
<html> <link href="https://fonts.googleapis.com/icon?family=material+icons" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.5/angular-sanitize.js"></script> <body> <div ng-app="myapp" ng-controller="myctrl"> <select ng-model="selectedname"> <option ng-repeat="item in names" ng-bind-html="item|unsafe">{{item}}</option> </select> </div> <p>in above list need icon @ end of eact option</p> </body> </html>
Comments
Post a Comment