CODEWITHSUNDEEP
javascriptangularjs
algorithmicCoder
algorithmicCoder

Reputation: 6789

AngularJS: Show a list only when there is value in input field

I want a list of suggested tags to show beneath an input field only when a user has started typing into the input field. Currently I have this

jade 

   div.form-group
      input#tags.form-control(name="tags", ng-model="query")
    div.form-group
      ul.suggested-tags
        li(ng-repeat="tag in tags | filter:query") {{tag.name}}

and this JS

  controller('TagsCtrl', function ($scope) {   
    $scope.tags = [
      {
        "name": "Foo",
        "id": "foo"
      },
      {
        "name": "Bar",
        "id": "bar"  
      }
    ]    
  })

What is the right way to set tags to [] if query is null?

Upvotes: 1

Views: 902

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

As I understand you right you want to show tags only if someone started to type in text field.

Use ng-show.

On type you set typeInProcess to be true

div.form-group
  input#tags.form-control(name="tags", ng-model="query")
div.form-group
  ul.suggested-tags (ng-show="typeInProcess" )
    li(ng-repeat="tag in tags | filter:query") {{tag.name}}

For your text field add: ng-change="typeInProcess()"`.

After in controller, set:

 $scope.typeInProcess = false;

$scope.typeInProcess= function() {      
  $scope.typeInProcess = true;
};

Upvotes: 2

Related Questions