如何在包含HTML实体的字符串中使用ngOptions？ [英] How do I use ngOptions with a string that contains HTML entities?

问题描述

我使用ngOptions构建了一个选择菜单，但其中一个标签的& amp; 中有一个HTML实体。该标签显示为 Books& amp; amp; amp; amp; amp; amp; amp;东西不是 Books&东西。我的玉是这样的：

  select（ng-show =isType ==='select'，id ={{ }}，ng-model =model，ng-options =o.id as o.label for o in options）
  

如何让HTML实体正确显示？

---

更新

我试着用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}}）
  

这将显示正确的html实体，但是基于模型不再选择正确的选项。例如，请参阅 http://jsfiddle.net/ucLvjvkn/1/ 。

解决方案

解决这个问题的方法是使用 ng-repeat 和 ng-bind -html （包含在 ngSanitize 中）代替 NG-选项。这是一个工作示例

pre $ var app = angular.module（'app'，['ngSanitize']）;


---

 < ;选项ng-repeat =选项中的选项ng-bind-html =options.textvalue ={{options.text}}>< / option> 
  

JSFiddle Link - 工作演示

此外，如果您必须使用 ng-options ，请使用以下辅助函数在绑定前先解码你的值

$ $ $ $ $ $ $ $函数htmlDecode（输入）{
var e = document.createElement（ 'DIV'）;
e.innerHTML = input;
return e.childNodes [0] .nodeValue;
}

JSFiddle Link - ng-options demo

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.

解决方案

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

这篇关于如何在包含HTML实体的字符串中使用ngOptions？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！