Question

我希望隐藏<span ng-show="currencyObject.to != 'undefined'">=</span>，直到currencyObject.to为undefined，undefined应为option，直到用户从{{{{}}中选择select 1}}框。
我使用ng-show="currencyObject.to != 'undefined'"有条件地显示隐藏span，但它无效。我发现，当页面刚刚加载时，=可见。

 <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);


            });

    };

});

Answer 1

您不需要!= 'undefined'来检查变量是否为defined

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

或

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

或

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

Answer 2

您可以直接使用ng-show="currencyObject.to" 同样在Js中正确使用与undefined进行比较是

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

AngularJS - 有条件地隐藏跨度

2 个答案: