How do I use ngOptions with a string that contains HTML entities?

问题

I'm using ngOptions to built a selection menu but one of my labels has an HTML entity in it &. The label shows up as Books & Stuff not Books & Stuff. My jade is this:

select(ng-show="isType === 'select'", id="{{id}}", ng-model="model", ng-options="o.id as o.label for o in options")

How can I get HTML entities to display properly?

Update

I'm trying the answer by sal:

select(ng-show="isType === 'select'", id="{{id}}", ng-model="model")
  option(ng-repeat="o in options", ng-bind-html="o.label", value="{{o.id}}")

An this displays the correct html entity but the correct option is not selected any more based on the model. See http://jsfiddle.net/ucLvjvkn/1/ for example.

回答1:

A way you can solve this is to use ng-repeat along with ng-bind-html (included with ngSanitize) in place of ng-options. Here is a working example

var app = angular.module('app', ['ngSanitize']);

<option ng-repeat="options in options" ng-bind-html="options.text" value="{{options.text}}"></option>

JSFiddle Link - working demo

Furthermore, if you must use ng-options use the following helper function to decode your values first before binding

function htmlDecode(input) {
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes[0].nodeValue;
}

JSFiddle Link - ng-options demo

回答2:

Building on the other answers, you can do this with a filter, and gain the benefit of continuing to use ng-options. Example filter:

myApp.filter('decoded', function() {
  "use strict";

  function htmlDecode(input) {
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes[0].nodeValue;
  }

  return function(input) {
    return htmlDecode(input);
  }
});

Then you can apply the filter in the ng-options. For example:

ng-options="o.id as o.label | decoded for o in options"

I was surprised that this worked, but it did for me in 1.3.20, and it is more elegant than other solutions!

It can be expensive to do this though. Optimized es6 version of the filter here: https://gist.github.com/DukeyToo/ba13dbca527f257a6c59

来源：https://stackoverflow.com/questions/28505150/how-do-i-use-ngoptions-with-a-string-that-contains-html-entities

标签

javascript

html

angularjs

angularjs-directive

ng-options