CODEWITHSUNDEEP
javascriptangularjs
user4298677
user4298677

Reputation:

AngularJS - Conditionally hide a span

I want to hide the <span ng-show="currencyObject.to != 'undefined'">=</span> until the currencyObject.to is undefined which is supposed to be undefined until the user select an option from the select box.
I used ng-show="currencyObject.to != 'undefined'" to conditionally show-hide the span but it is not working. What I find is, when the page is freshly loaded, the = is visible.

 <div class="row" ng-controller="QConvertController">
  <div class="col-md-8 col-md-offset-2">
    <div class="form-group">
      <label for="amount">Amount</label>
      <input type="number" step="any" class="form-control" id="amount" ng-model="currencyObject.amount">
    </div>
  </div>
    <div class="col-md-8 col-md-offset-2">
        <div class="form-group">
         <label for="from">From</label>
          <select class="form-control" id="from" ng-model="currencyObject.from" ng-change="getconvertedrate()">
            <option ng-repeat="currencyCode in currencyCodes" value="{{currencyCode.value}}">{{currencyCode.display}}</option>
          </select>
        </div>
    </div>

    <div class="col-md-8 col-md-offset-2">
        <div class="form-group">
         <label for="to">To</label>
          <select class="form-control" id="to" ng-model="currencyObject.to" ng-change="getconvertedrate()">
            <option ng-repeat="currencyCode in currencyCodes" value="{{currencyCode.value}}">{{currencyCode.display}}</option>
          </select>
        </div>
    </div>

    <br>
    <br>
    <br>
    <div class="col-md-8 col-md-offset-2">
        <h1 class="display-4">{{currencyObject.amount}} {{currencyObject.from}} <span ng-show="currencyObject.to != 'undefined'">=</span> {{currencyObject.amount_converted}} {{currencyObject.to}}</h1>
    </div>
</div>



QConvertController.js

var app = angular.module('qconvertctrlmodule', [])
.controller('QConvertController', function($scope, $http, $log) {

    $scope.currencyObject = {};

    $scope.currencyObject.from;

    $scope.currencyObject.to;

    $scope.currencyObject.amount;

    $scope.currencyObject.amount_converted;

    $scope.currencyObject.runCount = 0;

    $scope.currencyCodes = [{value : 'INR', display : 'Indian Rupee'}, {value : 'USD', display : 'US Dollar'}, {value : 'GBP', display : 'British Pound'}];

    $scope.getconvertedrate = function() {

        $log.info("FROM : " + $scope.currencyObject.from);

        $log.info("TO : " + $scope.currencyObject.to);

        $http.get("http://api.decoded.cf/currency.php", {params : {from : $scope.currencyObject.from,
            to : $scope.currencyObject.to, amount : $scope.currencyObject.amount}})
            .then(function(response) {

                $scope.currencyObject.amount_converted = response.data.amount_converted;
                $log.info(response.data.amount_converted);


            });

    };

});

Upvotes: 0

Views: 4941

Answers (2)

Syam Pillai
Syam Pillai

Reputation: 5217

You don't need != 'undefined' to check the variable is defined or not

<span ng-show="currencyObject.to">=</span>

or 

<span ng-hide="!currencyObject.to">=</span>

or

<span ng-if="currencyObject.to">=</span>

Upvotes: 1

scokmen
scokmen

Reputation: 571

You can directly use as ng-show="currencyObject.to" Also in Js correct usage of comparing with undefined is

if(typeof variable !== 'undefined'){ /*...*/ }

Upvotes: 0

Related Questions