CODEWITHSUNDEEP
angularjsdata-binding
user3604558
user3604558

Reputation: 3

conditionally bind angularjs

I am 100% new to AngularJS, and I am trying to set a condition for displaying a String. If the text the user enters starts with the letter a, it should display Hello {{name}}, welcome back! (where {{name}} binds to the name entered), otherwise the text should not appear. My code is as follows:

<!DOCTYPE html>
    <html data-ng-app="">
    <head>
        <title>Type Your Name</title>
    </head>
    <body>
        Please type your name:
        <br />
        <table><input type="text" data-ng-model="name" />
        </br>
        Hello {{name}}, welcome back!

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js">
        </script>
    </body>
    </html>

Upvotes: 0

Views: 1763

Answers (1)

simeg
simeg

Reputation: 1879

You should use a ng-if and check if the first character is the letter a. 

<div ng-app>
    <input type="text" data-ng-model="name" />
    <span ng-if="name.charAt(0) === 'a'">Hello {{name}}, welcome back!</span>
</div>

Fiddle here.

Do not use ng-show because it always renders the DOM element and hides it if conditions are not met, ng-if renders the DOM element if and only if the condition is met.

Upvotes: 3

Related Questions