Come utilizzare ngOptions con una stringa che contiene entità HTML?

Question

Sto usando ngOptions per creare un menu di selezione ma una delle mie etichette ha un'entità HTML al suo interno &. L'etichetta si presenta come Books & Stuff non 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") 

Come posso visualizzare correttamente le entità HTML?

---

Aggiornamento

sto cercando la risposta da 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 questa mostra l'entità html corretto, ma l'opzione corretta non è selezionata più in base al modello . Vedere http://jsfiddle.net/ucLvjvkn/1/ per esempio.

Answer 1

Un modo per risolverlo è utilizzare ng-repeat insieme a ng-bind-html (incluso con ngSanitize) al posto di ng-options. Ecco un esempio di lavoro

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

---

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

JSFiddle Link - demo funzionante

Inoltre, se è necessario utilizzare ng-options utilizzare la seguente funzione di supporto per decodificare i valori prima vincolante

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

JSFiddle Link - ng-options demo

Answer 2

Basandosi sulle altre risposte, è possibile farlo con un filtro e ottenere il vantaggio di continuare a utilizzare ng-options. Esempio di filtro:

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); 
    } 
}); 

Quindi è possibile applicare il filtro nelle opzioni ng. Per esempio:

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

Mi ha sorpreso che questo ha funzionato, ma lo ha fatto per me in 1.3.20, ed è più elegante rispetto ad altre soluzioni!

Tuttavia, può essere costoso farlo. Versione es6 ottimizzata del filtro qui: https://gist.github.com/DukeyToo/ba13dbca527f257a6c59