0

我有以下代码,以说明我遇到的问题:

<p>{{'This&nbsp;&nbsp;&nbsp;&nbsp;is&nbsp;&nbsp;spaced'}}</p>
<p>This&nbsp;&nbsp;&nbsp;&nbsp;is&nbsp;&nbsp;spaced</p>
<p>{{leerlingController.myReplace('This    is  spaced')}}</p>

第一行和第二行按预期显示,显示空格而不是代码。然而,第三行显示了   代码而不是空格。

该功能在控制器中,简单地说:

vm.myReplace = function(item) {
    return item.replace(/ /g, '&nbsp;');
}

如何使此功能按预期工作?(我需要它来修改附加到 ngRepeater 的选择选项中的文本。)

4

2 回答 2

1

这是来自 Angular 的安全限制,请参阅此处的文档

您可以使用ng-bind-html和加载ngSanitize模块。或者$sce.trustAsHtml(value)如果您不想加载,请在您的方法中使用ngSanitize.

然后它看起来像这样($sce被 dep. 注入控制器):

vm.myReplace = function(item) {
    return $sce.trustAsHtml(item.replace(/ /g, '&nbsp;'));
};

请看下面的演示或这个小提琴

2016 年 6 月 12 日更新

我不确定是否有更简单的方法可以做到这一点。但是您可以检查每一列并计算所需的填充。为了添加填充,我使用了 underscore.string

也可以使用,ng-repeat以便您可以使用ng-bind-html并具有正确的间距,您应该使用等宽字体,例如 Lucida Console 或 Courier(请参阅小提琴中的 css 样式)。

在这里你可以找到一个小提琴

另一种方法是创建一个样式类似于选择标签的指令,然后您可以使用下拉列表中的表格来获得正确的间距。

更新 12.06.2016 - 21:25 (UTC):

请看看这个小提琴。它使用指令方法,我认为这是解决问题的最佳方法。

angular.module('demoApp', ['ngSanitize'])
	.controller('mainCtrl', MainCtrl);
    
function MainCtrl() {
	var vm = this;
    
    vm.myReplace = function(item) {
    	return item.replace(/ /g, '&nbsp;');
	};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.6/angular-sanitize.js"></script>
<div ng-app="demoApp" ng-controller="mainCtrl as ctrl">
    <span ng-bind-html="ctrl.myReplace('This    is  spaced')"></span>
</div>

于 2016-06-11T21:58:31.517 回答
0

找到了完成工作的方法:

<select name='Leerling' id='Leerling' size='1'>
    <option value='Maak een keuze...' selected disabled>Maak een keuze...</option>
    <option ng-repeat="leerlingOption in leerlingController.leerlingen"
            ng-bind-html="leerlingController.myReplace(leerlingOption.leerlingdropdown)"
            value={{leerlingOption.leerlingdropdown}}></option>
</select>

myReplace 是(由 AWolf 回答):

vm.myReplace = function(item) {
    return $sce.trustAsHtml(item.replace(/ /g, '&nbsp;'));
}

于 2016-06-13T12:15:52.683 回答