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

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

但是你需要确保Angular＆＃34;信任＆＃34;您尝试使用的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

NB：我只在Chrome版本41中对此进行了测试。我不确定所有浏览器是否允许在选项文本中使用 。

Answer 2

相关： 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 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

Answer 4

对于有角度的2+，我使用此管道来“解开”模板空间：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
   name: 'untrim'
})
export class UntrimPipe implements PipeTransform {
   transform(value: any, args?: any): any {
     return typeof value === 'string' ? value.replace(/\s/g, '&nbsp;') : value;
   }
}

如何禁用角度模板修剪？

4 个答案: