如何禁用角度模板修整？

Question

我正在尝试在select元素中创建一个树结构。我通过过滤器进行缩进。结果这个缩进在输出后修剪。是否有可能禁用修剪？

<select id="cat"> 
    <option value="{{category.id}}" ng-repeat="category in categories">{{category | intent}}</option> 
</select> 

app.filter('intent', function() { 
    return function(category) { 
     var INTENT_SIZE = 4; 
     if (category == null) { 
      return ''; 
     } 
     var result = ""; 
     for (var i = 0; i < category.intent * INTENT_SIZE; i++) { 
      result += " "; 
     } 
     result += category.name; 
     return result; 
    }; 
}) 

Answer 1

相关： Add space to <select> with ng-options

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

 
app.filter('intent', function() { 
 
    return function(category) { 
 
    var INTENT_SIZE = 4; 
 
    if (category == null) { 
 
     return ''; 
 
    } 
 
    var result = ""; 
 
    for (var i = 0, len = category.intent * INTENT_SIZE; i < len; i++) { 
 
     result += String.fromCharCode(160); 
 
    } 
 
    result += category.name; 
 
    return result; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app='app'> 
 
    <div ng-init="categories = [{id: 0, name:'bob', intent: 0}, 
 
           {id: 1, name:'chris', intent: 1}, 
 
           {id: 2, name:'mike', intent: 2}]"></div> 
 
    <select id="cat"> 
 
    <option value="{{category.id}}" ng-repeat="category in categories"> 
 
     {{ category | intent }} 
 
    </option> 
 
    </select> 
 
</div>

Answer 2

您需要使用  HTML字符来呈现浏览器不会忽略的空格。

但是，您需要确保Angular“信任”您尝试使用的HTML。

<select id="cat"> 
    <option value="{{category.id}}" ng-repeat="category in categories" ng-bind-html="category | intent"></option> 
</select> 

您的过滤器的代码然后更改为：

您可以通过更改您的标记来实现这一目标

app.filter('intent', function($sce) { 
    return function(category) { 
     var INTENT_SIZE = 4; 
     if (category == null) { 
      return ''; 
     } 
     var result = ""; 
     for (var i = 0; i < category.intent * INTENT_SIZE; i++) { 
      result += "&nbsp;"; 
     } 
     result += category.name; 
     return $sce.trustAsHtml(result); 
    }; 
}); 

Working Plunkr

注：我只在Chrome中测试了这个版本41.我不确定是否所有浏览器都允许在选项文本中输入 。

Answer 3

要在您选择使用ng-bind-html呈现空间得到空格字符。

<select id="cat"> 
    <option value="{{category.id}}" ng-repeat="category in categories" ng-bind-html="category | intent"></option> 
</select> 

在您的筛选：

app.filter('intent', function($sce) { 
    return function(category) { 
     var INTENT_SIZE = 4; 
     if (category == null) { 
      return ''; 
     } 
     var result = ""; 
     for (var i = 0; i < category.intent * INTENT_SIZE; i++) { 
      result += "&nbsp;"; 
     } 
     result += category.name; 
     return $sce.trustAsHtml(result); 
    }; 
}); 

DEMO