How to make an optional variable in angular expression?

Question

Example:

var scope = {
      thing: 'Monkey'
    };
$interpolate("Awesome{{' ' + thing}}!")(scope);
                       ^^^

I don't want to print a white space when thing is null or undefined.

Expectectations:

scope.thing == 'Monkey'

-> "Awesome Monkey!"
scope.thing == null

-> "Awesome!"

Is it possible to specify {{' ' + thing}} somehow to not print anything when thing is null or undefined?

EDIT:

Possible I need something like this {{ thing && (' ' + thing) }}, but I guess that with angular it should be possible to be done in more elegant way.

PS I'm new in Angular, so sometimes I develop a wheel :)

xsh.7 · Accepted Answer · 2014-09-18 06:57:42Z

2

You can try to go with IIf notation:

$interpolate("Awesome{{thing ? ' ' + thing : ''}}!")(scope);

answered Sep 18, 2014 at 6:57

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marian Ban · Accepted Answer · 2014-09-18 07:24:12Z

2

EDIT: first time i misunderstood the question. Now it should be ok.

app.controller('MainCtrl', function($scope) {
  $scope.model = {
      thing: 'Monkey',
      emptyThing: null
  };

  $scope.print = function (value) {
      if (value)
      {
         return ' ' + value;
      }
      return '';
    };
});

  <body ng-controller="MainCtrl">
    <p>Hello{{print(model.thing)}}!</p>
    <p>Hello{{print(model.emptyThing)}}!</p>
  </body>

You can create a filter if yo want to reuse this functionality across multiple controllers:

app.filter('addWhitespace', function() {
    return function(input) {
     if (input)
      {
         return ' ' + input;
      }
      return '';
    };
});

<p>Hello{{model.thing | addWhitespace}}!</p>

http://plnkr.co/edit/J9PKfhNC1SzKZKw7Z5yl?p=preview

Tip #2: Do not replace the entire scope with your custom object create a new property on the scope instead.

edited Sep 18, 2014 at 7:24

answered Sep 18, 2014 at 6:44

Marian Ban

8,1881 gold badge35 silver badges45 bronze badges

1 Comment

Warlock Over a year ago

I like the idea about print() that is used as a wrapper.

wojjas · Accepted Answer · 2014-09-18 07:14:11Z

1

Great answers. It's not that much logic but you could put it into the controller. For better separation and testability.

Just create a function like this in the controller:

$scope.thingOrNothing = function(){
  return !$scope.model.thing || ' ' + $scope.model.thing + ' ';
}

And in html, call the function like this:

<body ng-controller="MainCtrl">
  <p>Hello{{thingOrNothing()}}Men!</p>
</body>

answered Sep 18, 2014 at 7:14

wojjas

1,0961 gold badge10 silver badges22 bronze badges

2 Comments

Warlock Over a year ago

This is a good idea! I can use thingOrNothing() as a wrapper and send data as argument, for example Hello{{thingOrNothing(thing)}}Men!.

wojjas Over a year ago

Yes, exactly like MajoB does it with his $scope.print function. We wrote our answers at the same time :-)

Collectives™ on Stack Overflow

How to make an optional variable in angular expression?

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related