0

This is the pseudo code

Web App: nametester.html Uses: AngularJS Model: - strName (which stores a String value)

--- Steps: 1: Assign strName using ng-model with the prompt: 'Please enter your name:'

2: ng-show (if)"strName == '—add your name here—'"

3: Output 'Awesome name!'

4: ng-hide (else)"strName == '—add your name here—'"

5: Output strName, ' is a not my name'

Use the lowercase filter to convert the value of a variable into lowercase before you compare.

And my code

Name Tester App

    <p><label for="name">Please Enter Your Name:</label>
    <input type="text" id="name" data-ng-model="strName"/></p>
    <span>{{strVar | lowercase}}</span>
        <p>
            <span data-ng-show ="strName =='Ben'"> Awesome Name</span>
            <span data-ng-hide ="strName =='Someone'">{{strName}}, is not your name</span>
        </p>

But it doesn't work. I am seeing ", is not your name" even when the text input is blank and how to filter input to lowercase values before its compared.

Show works. When I put my name I do get output in the format

Awesome Name! Ben, is not your name

Improve this question
3
  • 1
    Could you setup a plunkr? Commented Mar 18, 2016 at 6:40
  • Remove the white spaces between data-ng-show and =, and data-ng-hide and =. Commented Mar 18, 2016 at 6:47
  • @str tried, doesn't work. Commented Mar 18, 2016 at 6:51

5 Answers 5

Reset to default
1

Using {{strVar | lowercase}} will not modify your variable value. It will only display in lowercase for that particulary usage.

Your comparison inside ngShow/ngHide should be:

<span ng-show="strName.toLowerCase() == 'Ben'.toLowerCase()" />;
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Thanks. And what about the ng-hide span ? It appears even when filled is blank and it continues to appear after the name is matched like this Awesome Name! Ben, is not your name
It will hide only if the input name is 'Someone'. You probably want it to be <span data-ng-hide ="strName !='Ben'">{{strName}}, is not your name</span>
@henrikmerlander when I do that it never shows that statement even if I type wrong.
then change to ng-show instead, it all comes down to what you are trying to achieve, which I do not know.
Can't don't you see the pseudocode I have provided at the top ? My code must meet them.
|
0

If you want to exclusively show or hide one of the spans, then just use ng-show and ng-hide with the same expression inside. Like this:

<span data-ng-show="strName =='Ben'"> Awesome Name</span>

and

<span data-ng-hide="strName =='Ben'">{{strName}}, is not your name</span>
Improve this answer

Comments

0

First of all we should know what is ng-show="" and ng-hide="" in angularJS.

By Simple term The ng-show directive shows or hides an HTML element. If the condition is true then it will show the content. If not then it won't. So we can use ng-show for both show and hide.

The ng-hide directive shows or hides an HTML element. If the condition is true then it will hide the content. If not then it won't. So we can use ng-hide for both show and hide. By referring these advice your making small mistake by comparing strings in the directive itself. Kindly remove those conditions.

<!DOCTYPE html>
<html ng-app='nametest'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title> Show Hide</title>
</head>
<body ng-controller='strName'>

 <p><label for="name">Please Enter Your Name:</label>
<input type="text" id="name" data-ng-model="strName1" > </p>
 <span>{{strName1 | lowercase}}</span>

 <span data-ng-show ="temp"> Awesome Name</span>
  <span data-ng-show ="!temp"> Is not My Name</span>

</body>
</html>

**Controller :**



var app = angular.module('nametest',[]);

app.controller('strName',function($scope){
  $scope.strName1 = 'Ben';
  var my_Name = $scope.strName1;
  $scope.temp = false;
  if(my_Name == "Ben"){
    console.log('Success');
    $scope.temp = true;
  }

});

For more details visit.. https://jsbin.com/pokukudoyo/edit?html,js,output

Improve this answer

1 Comment

Actually that's not acceptable. We aren't allowed to use controller yet. and we must use show and hide statement. Check my pseudocode.
0

Here you go.

In the ng-hide you need to check that strName does not exist OR that it is set to 'Ben'.

Do do this we pass this expression !strName || strName == 'Ben' to the ng-hide directive. You can run snippet below. 

angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

      <p><label for="name">Please Enter Your Name:</label>
    <input type="text" id="name" data-ng-model="strName"/></p>
    <span>{{strVar | lowercase}}</span>
        <p>
            <span data-ng-show ="strName =='Ben'"> Awesome Name</span>
            <span data-ng-hide ="!strName || strName == 'Ben'">{{strName}}, is not your name</span>
        </p>

</div>

Improve this answer

Comments

0

In simple way you can do this

<span ng-show="strName.toLowerCase() == 'ben'" />;

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.