Question

I’m building an autocomplete box in AngularJS. The relevant code looks like this

<input type="text" ng-model="tag">
<div ng-show="tag">
  <ul>
    <li ng-repeat="t in user.tags | filter:{name:tag}">
      <a>{{t.name}}</a>
    </li>
  </ul>
</div>

I’d like to know what is the best way to show the list of suggestions when “tag” has no value (i.e. I want to show all the tags when the user press the down key. No need to mention the keypressing code on the answer).

Answer 1

ng-show works with any expression that results in a bool, so all you need to do is replace “tag” with “tag === ””, or some equivalent if your tag is going to be undefined or null.

If you only want to show when a certain key is pressed I would create another variable which you set to true when the down key is pressed and check for that also, e.g.

$scope.KeyPressed = false;
$scope.Tags = '';

$scope.ShowTags = function () {
    return $scope.KeyPressed && $scope.Tags !== '';
};

Then in you div:

<div ng-show="ShowTags()">

See jsfiddle for example

If you need to change any of the variables from within a jquery plugin you may need to use

$scope.$apply()