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

Question

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?

Maxim Shoustin · Accepted Answer · 2013-09-01 10:17:10Z

2

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;
};

edited Sep 1, 2013 at 10:17

answered Sep 1, 2013 at 9:01

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

algorithmicCoder Over a year ago

for the input field: by ng-model = "item" do you mean ng-model="query" which is already present? and should that be typeInProcess(query) or just typeInProcess()?

algorithmicCoder Over a year ago

i think its better to use different names for the different things (variable and function)...this general approach got me unstuck though..thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related