CODEWITHSUNDEEP
angularjs
nuclear kote
nuclear kote

Reputation: 500

How to disable angular template trimming?

I'm trying to create a tree structure in the select element. I make indention by filter. As a result this indentation trims after output. Is that possible to disable trimming?

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

Upvotes: 0

Views: 730

Answers (4)

jmuhire
jmuhire

Reputation: 2211

For angular 2+ I use this pipe to 'untrim' template spaces :

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

Upvotes: 1

dting
dting

Reputation: 39287

Related: 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>

Upvotes: 0

mohamedrias
mohamedrias

Reputation: 18566

To get space characters in your options use ng-bind-html to render the space.

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

In your Filter:

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

Upvotes: 0

GregL
GregL

Reputation: 38103

You need to use the &nbsp; HTML character to render a space that will not be ignored by the browser.

But then you need to make sure that Angular "trusts" the HTML you are trying to use.

You can accomplish that by changing your markup to:

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

Then change your filter code to:

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: I only tested this in Chrome version 41. I'm not sure if all browsers allow having &nbsp;s in the option text.

Upvotes: 0

Related Questions