将div中的输入和文本相乘并显示,并使用angularjs将其显示在div中

时间:2016-02-10 17:36:51

标签: html angularjs

我想我没有正确解析文本到数字/浮点输入类型号是好的但我猜div没有属性'类型'

<body>
            <div class="wrapper" ng-app="">
                <div id="usd" class="type-container">
                    <div id="usd-type" class="boxes type">USD</div>
                    <input  id="usd-input-value" class="boxes" type="number" ng-model="usd">
                    <div ng-model="usdrate"  id="usdrate" class="boxes rate"></div>
                    <div  id="usd-output" class="boxes output">{{Number(usd) * usdrate}}</div>              
                </div>
                <div id="gpb" class="type-container">
                    <div id="gpb-type" class="boxes type">GPB</div>
                    <input id="gbp-input-value" class="boxes" type="text">
                    <div id="gbprate" class="boxes rate"></div>
                    <div id="gbp-output" class="boxes output"></div>                    
                </div>
            </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>            
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function(){
                setInterval(function(){
                jQuery.ajax({                   
                url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDEUR%22%2C%22USDCHF%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=",
                dataType:'json',
                success:function(response)
                {
                    $('#usdrate').text(response.query.results.rate[0].Rate*1.955);
                    $('#gbprate').text(response.query.results.rate[1].Rate*1.955);
                    //console.log(response.query.results.rate[0].Rate);
                }
                });},500);
        });

        </script>
    </body>

这是除了css之外的整个代码,此时分享并不重要

1 个答案:

答案 0 :(得分:0)

运行以下代码段。

检查代码以查看我如何使用角度应用程序,然后初始化角度模块。

在模块中,我使用$scope与页面进行交互,然后为了繁殖,我使用了一个getter函数,我称之为mult()

随时寻求任何帮助。 :)

var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {

  $(document).ready(function() {
    setInterval(function() {
      jQuery.ajax({
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDEUR%22%2C%22USDCHF%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=",
        dataType: 'json',
        success: function(response) {
          $scope.usdrate = Number(response.query.results.rate[0].Rate * 1.955);
          $('#usdrate').text($scope.usdrate);
          $scope.gbprate = Number(response.query.results.rate[1].Rate * 1.955);
          $('#gbprate').text($scope.gbprate);
          //console.log(response.query.results.rate[0].Rate);
        }
      });
    }, 500);
  });

  $scope.mult = function() {
    return $scope.usdrate * $scope.usd;
  }



});
<body ng-app="MyApp">
  <div class="wrapper" ng-controller="MyCtrl">
    <div id="usd" class="type-container">
      <div id="usd-type" class="boxes type">USD</div>
      <input id="usd-input-value" class="boxes" type="number" ng-model="usd">
      <div id="usdrate" class="boxes rate"></div>
      <div id="usd-output" class="boxes output">{{mult()}}</div>
    </div>
    <div id="gpb" class="type-container">
      <div id="gpb-type" class="boxes type">GPB</div>
      <input id="gbp-input-value" class="boxes" type="text">
      <div id="gbprate" class="boxes rate"></div>
      <div id="gbp-output" class="boxes output"></div>
    </div>
  </div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</body>

来源: