I am fairly new to AngularJS and I am trying to have my ng-repeat set a default value when a null is found. I tried this solution which I found on another SO page,

<div class="col-sm-12" ng-repeat="data in dataNames">
    {{data.name || '<b>NONE</b>'}}
</div>

However when I add in the NONE text it is just displaying the whole line as plain text and it appears angular is not evaluating it.

UPDATE

I am trying to call this filter now and use $sce to allow me to return html. Here is the filter

require(["app", "angular"], function(app, angular) {
    app.filter("default", function ($sce) {
        return function (input, def) { 
            return $sce.trustAsHtml(!!input ? input : '<b>' + def + '</b>');
        };
    });
});

And here is how I am calling it

{{ name | default: 'NONE' }}

It is calling the function and evaluating correctly, but it is displaying the b tags as plain text instead of html. Am I not using $sce correctly maybe?

I am fairly new to AngularJS and I am trying to have my ng-repeat set a default value when a null is found. I tried this solution which I found on another SO page,

<div class="col-sm-12" ng-repeat="data in dataNames">
    {{data.name || '<b>NONE</b>'}}
</div>

However when I add in the NONE text it is just displaying the whole line as plain text and it appears angular is not evaluating it.

UPDATE

I am trying to call this filter now and use $sce to allow me to return html. Here is the filter

require(["app", "angular"], function(app, angular) {
    app.filter("default", function ($sce) {
        return function (input, def) { 
            return $sce.trustAsHtml(!!input ? input : '<b>' + def + '</b>');
        };
    });
});

And here is how I am calling it

{{ name | default: 'NONE' }}

It is calling the function and evaluating correctly, but it is displaying the b tags as plain text instead of html. Am I not using $sce correctly maybe?

• javascript
• angularjs

• you cannot use html tags in the expression. You'll have to create a function and use $sce to return the value – Ronnie Commented Jun 23, 2014 at 23:15

5 Answers 5

This is equivalent to your first attempt. ng-if only produces a b tag when the name is null or undefined.

<div class="col-sm-12" ng-repeat="data in dataNames">
  {{data.name}}<b ng-if="!data.name">NONE</b>
</div>

Here is a demo: http://plnkr.co/edit/heRkCMvuqCHbyJhgpV4p?p=preview

In one of my project, I defined my 'default' filter:

angular.module('my.filters', []).
    filter('default',[function ()
    {
        return function (input, def)
        {
            return !!input ? input : def;
        };
    }]);

Include it to your code (file and dependency) and you can use it as

{{ data.name | default:'NONE' }}

However, if you want to use HTML as the value, you need to do more, for example

<div ng-bind-html="{{ data.name | default:'<b>NONE</b>' }}" ...></div>

You may need to include the angular-sanitize.js module for the above to work. An alternative is to use ng-style or ng-class for making the text bold:

    <div ng-class="{'bold':data.name}" >{{ data.name | default:'NONE' }}</div>

In order to use HTML tags, you'll have to use $sce

jsbin

HTML:

<ul>
  <li ng-repeat="data in dataNames" ng-bind-html="formatName(data.name)"></li>
</ul>

Controller:

function TestController($scope, $sce)
{
  $scope.dataNames = [
    {
      foo: 'bar',
      name: 'Ronnie'
    },
    {
      foo: 'bar',
      name: 'Ted'
    },
    {
      foo: 'bar',
      name: null
    },
    {
      foo: 'bar',
      name: 'Jason'
    }
  ];

  $scope.formatName = function(name)
  {
    return $sce.trustAsHtml((name != null) ? name : '<b>none</b>');
  }
}

OutPut:

• Ronnie
• Ted
• none
• Jason

I ran across the same problem recently and ended up using a custom filter. While this does have the downside of a bit more work upfront, the solution can be used in similar situations and lets you substitute different text.

So the expression would look like this: {{variable || nullFilter:'This value is null'}}

The filter looked similar to:

angular.module('appName').filter('nullFilter', function() {
return function(input, replacementText) {

  if (input == null) {
    return replacementText;
  }
  return input;
};

});

More documentation can be found here: https://docs.angularjs/guide/filter

As https://stackoverflow./users/1245971/j-wittwer. shows one way(using ng-if) but we can implement this by using angularjs filter

{{data.name||'---Null'}} --> By writing this we can show '---Null' when ng-repeat finds a null or undefined in angularjs

I have created plunkr of using both ng-if and angular filter.

Now its on your choice what you like.