CODEWITHSUNDEEP
javascriptangularjs
user5092549
user5092549

Reputation:

Show/Hide Angular confusion

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

Upvotes: 0

Views: 732

Answers (5)

Firasath
Firasath

Reputation: 11

In simple way you can do this

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

Upvotes: 0

Martin
Martin

Reputation: 16300

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>

Upvotes: 0

Prasanth-Ramanathan
Prasanth-Ramanathan

Reputation: 74

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

Upvotes: 0

henrikmerlander
henrikmerlander

Reputation: 1574

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>

Upvotes: 0

ThiagoPXP
ThiagoPXP

Reputation: 5462

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()" />;

Upvotes: 1

Related Questions