Render only if {{variable}} is defined

Question

Say I have some text such as:

The data is ready. Here it is: {{something}}

I would like to only render that line if something is not undefined. How can I do that?

In case it helps, here is that line in a broader context:

<html>
<body>
<div>
<div class='container-fluid' ng-controller="TypeaheadCtrl">

<input type="text" ng-model="selected" 
typeahead="name_and_uid as item.name_and_uid for item in items | 
filter:{name_and_uid: $viewValue} | limitTo:16" 
typeahead-on-select='onSelect($item, $model, $label)' class="form-control">

The data is ready. Here it is: {{name_and_uid}}

</div>
</body>
</html>

where {{name_and_uid}} is only defined after a selection is done.

Currently, I get "The data is ready. Here it is:" before making a selection. I only want that to be rendered once I type in and make a selection.

score 2 · Accepted Answer · answered Dec 11 '14 at 09:44

2

You can define in your scope:

   $scope.isDefined = function(v) {
            return angular.isDefined(v);
        };

And then

<div ng-show="isDefined(name_and_uid)">
    The data is ready. Here it is: {{name_and_uid}}
</div>

answered Dec 11 '14 at 09:44

Abel Rodríguez

111
5

Worked perfectly well. Thanks – Amelio Vazquez-Reina Dec 11 '14 at 21:35

score 0 · Answer 2 · answered Dec 11 '14 at 05:55

0

Assuming the inputs ng-model length is 0 initially, you can use ng-show to only render that line when $scope.selected is greater then zero.

<div ng-show="selected.length > 0">
    <span>The data is ready. Here it is: {{name_and_uid}}</span>
</div>

answered Dec 11 '14 at 05:55

cheekybastard

5,535
3
22
26

Render only if {{variable}} is defined

2 Answers2