javascript - AngularJS - Conditionally hide a span -
i want hide <span ng-show="currencyobject.to != 'undefined'">=</span>
until currencyobject.to
undefined
supposed undefined
until user select option
select
box.
used ng-show="currencyobject.to != 'undefined'"
conditionally show-hide span
not working. find is, when page freshly loaded, =
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, : $scope.currencyobject.to, amount : $scope.currencyobject.amount}}) .then(function(response) { $scope.currencyobject.amount_converted = response.data.amount_converted; $log.info(response.data.amount_converted); }); }; });
you don't need != 'undefined'
check variable defined
or not
<span ng-show="currencyobject.to">=</span>
or
<span ng-hide="!currencyobject.to">=</span>
or
<span ng-if="currencyobject.to">=</span>
Comments
Post a Comment