0

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.

Amelio Vazquez-Reina
  • 91,494
  • 132
  • 359
  • 564

2 Answers2

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>
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>
cheekybastard
  • 5,535
  • 3
  • 22
  • 26