Search code examples
angularjsangularjs-bootstrap

Render only if {{variable}} is defined


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.


Solution

  • 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>