How can I use ng-model with ng-hide?

Question

I have an input field that uses ng-model, when the length of the input is greater than 3 characters I would like to use ng-hide to hide an element. How should I approach this? Any help is greatly appreciated.

Answer 1

Ng-Hide

<div>
  <input type="text" ng-model="letter" ng-hide="letter.length > 3"/>
</div>

Basically what i am doing above is setting the ng-model then im making an expression inside the text. The expression states that if the length of the model letter (A.K.A input text) has a length greater than 3 you hide it. Here is the offical documentation of ng-hide:

https://docs.angularjs.org/api/ng/directive/ngHide

The syntax for ng-hide goes like this:

<element ng-hide="expression"></element>

So if the expression comes to become true then it hides if not it shows. And talking about showing you can also do the opposite with the ng-show directive

Ng-Show

<element ng-show="expression"></element>

In this case if the expression is true it will show otherwise it would hide. Here is the offical documentation for ng-show:

https://docs.angularjs.org/api/ng/directive/ngShow

Answer 2

<element-to-hide ng-hide="inputModelHere.length > 3" />