Question

以下是我的角度代码的代码：

$ echo <(ls -l)
/dev/fd/63

以下是我正在使用的JSON数据的图片：

正如您在财务信息中看到的，我有多个具有货币值的密钥。如何以角度提取这些值并将它们一起添加，然后将结果显示在我的HTML文件中。

我显然可以使用

在html中获取land_curr和land_prev值

  angular.module('ngApp', [])
  .factory('authInterceptor', authInterceptor)
  .constant('API', 'http://appsdev.pccportal.com:8080/ecar/api')
  .controller('carDetails', carDetails)

  function carDetails($scope, $http, API) {
    $http.get( API + '/car/12208' ).
    success(function(data) {
      $scope.details = data;
    });
  }

但是在我给出的HTML中，有一个“总金额”的位置。所以我需要获取这些值，将它们一起添加，然后将新值放入HTML文件的“总量”部分。

我有办法做到这一点吗？

编辑：

请注意，这些JSON值会发生变化，所以我不能将货币值“硬编码”成任何东西，因为货币金额会经常变化。此外，我需要能够将所有“_prev”值和“_curr”值一起添加。我还需要能够将“land_curr”和“land_prev”加在一起。

Answer 1

由于JS是一种动态语言，因此您可以在“财务信息”中添加新的属性/方法。那是数学。像：

  details['Financial Info'].calcTotalLand= function(){return this.land_prev+ this.land_curr;};

你也可以用HTML写一下

{{ details['Financial Info'].land_curr + details['Financial Info'].land_prev}}

如果可能的话

Answer 2

我建议你从你的html中调用一个函数来获得总数。这样，如果“财务信息”对象中的值动态更改，则总计也会更新。请参阅下面提供的示例。（我还投了ng-repeat列出了所有'财务信息'，以及currency过滤器，以防您不知道这些。）

在示例中，我只是将您的示例对象硬编码到$scope.details变量中。在您的实际应用中，您仍然可以使用相同的方式填充此内容 - 使用$http服务来调用您的API。

您可以将一个名为getTotal()的函数添加到控制器的$scope。这样，您可以使用{{getTotal()}}直接从您的html调用它。

在getTotal()方法中，您可以只使用内置forEach()方法的角度（或者如果您愿意，只使用普通的旧版香草javascript）来遍历“财务信息”对象中的每个项目。然后，您只需要调用parseInt()传递值，因为它们是对象中的字符串，然后将其添加到正在运行的sum变量中。最后，您可以在角度sum完成后返回forEach()。

编辑：添加了获取所有_curr值和_prev值以及land_值的方法。

编辑2 ：添加了超时以通过$http来电模拟数据加载。为避免在$scope.details调用返回之前$http为空的错误，您可以在每个if (!$scope.details) { return; }函数的开头添加getTotal，也可以初始化$scope.details，您希望$http调用返回的每个项目的值为空或空值。例如，在下面的代码段中，我初始化了$scope.details变量：

$scope.details = {
  'Executive Summary': null,
  'Financial Info': {},
  ID: null
};

工作示例：

angular.module('ngApp', [])
  .controller('carDetails', carDetails);

function carDetails($scope, $timeout) {
  $scope.details = {
    'Executive Summary': null,
    'Financial Info': {},
    ID: null
  };

  $scope.loading = true;
  $timeout(function() {
    $scope.details = {
      'Executive Summary': "This is a test. Please ignore.",
      'Financial Info': {
        alt_curr: "1000",
        alt_prev: "500",
        auto_curr: "2100",
        bldgs_curr: "12000",
        bldgs_prev: "5000",
        land_curr: "30000",
        land_prev: "700",
        machine_curr: "25000",
        machine_prev: "1000",
        other_curr: "2659",
        other_exp_curr: "900",
        other_exp_expl: "9800",
        other_exp_prev: "600",
        other_prev: "6000",
        startup_curr: "600",
        startup_prev: "550"
      },
      ID: 12208
    };
    $scope.loading = false;
  }, 5000);

  $scope.getTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      sum += parseInt(value, 10);
    });
    return sum;
  }

  $scope.getCurrTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      if (key.substring(key.length - 5) == '_curr') {
        sum += parseInt(value, 10);
      }
    });
    return sum;
  }

  $scope.getPrevTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      if (key.substring(key.length - 5) == '_prev') {
        sum += parseInt(value, 10);
      }
    });
    return sum;
  }

  $scope.getLandTotal = function() {
    var sum = 0;
    angular.forEach($scope.details['Financial Info'], function(value, key) {
      if (key.substring(0, 4) == 'land') {
        sum += parseInt(value, 10);
      }
    });
    return sum;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ngApp" ng-controller="carDetails" ng-cloak>
  <div ng-show="!loading">
    <div ng-repeat="(key, value) in details['Financial Info']">
      <span>{{key}}: {{value|currency}}</span>
    </div>
    <hr/>
    <span>TOTAL: {{getTotal()|currency}}</span>
    <br>
    <span>Current Total: {{getCurrTotal()|currency}}</span>
    <br>
    <span>Previous Total: {{getPrevTotal()|currency}}</span>
    <br>
    <span>Land Total: {{getLandTotal()|currency}}</span>
  </div>
  <div ng-show="loading">
    Simulating data loading by using a timeout...
  </div>
</div>

Answer 3

你在Angular中尝试过forEach吗？见下文：

angular.module('myApp', []).controller('carDetails', ['$scope', function(scope) {
             var vm = this;
             vm.obj = {'Financial Info':{
                alt_curr : "1000", alt_prev : "2000"
             }}
             vm.sum = 0;
             angular.forEach(vm.obj['Financial Info'], function(val, key){
                vm.sum +=parseInt(val);
             });
             console.log(vm.sum)
         }]);

修改在您的html中，您可以显示变量，如下所示：

<html> <div ng-app="myApp" ng-controller="carDetails as vm"> {{vm.sum}} </div> </html

Answer 4

不幸的是，如果列表中的密钥可以随时更改，那么您永远不能将代码写入可以永久工作的组。只要添加，更改或完全删除了其他密钥，您的代码就会失败并需要重新编写。

我觉得您收到的数据不是由您自己生成的，但如果您可以请求它以可用的格式提供，您将能够编写您需要的代码。但是，如果你无法改变这一点，那么你必须进行一些字符串操作，将数据项和值放入你可以使用的组中 - 但你永远不会知道那些数据究竟是什么 - 它们只是字符串。

作为一个黑客，您可以获得每个项目的财务信息对象（键/值对），并且当它们通过＆＃39;每个＆＃39;功能拆分下划线上的键，检查你的'curr＆＃39;和＆＃39; prev＆＃39;价值（或配对＆＃39; bldgs＆＃39;＆＃39; land＆＃39;等），然后相应地加总它们。但是，我注意到还有一个＆＃39; expl＆＃39;在其中一个键中 - 这就是为什么任何改变可能会破坏你所做的事情。

正确执行此操作的唯一方法是生成一个正确的JSON对象，该对象可以告诉您项目是什么以及它们具有什么值。这是模型中结构化数据的目的 - 字符串和值不足以为您提供工作。

一个粗略的例子可能是：

{
    'Executive Summary': "This is a test. Please ignore.",
    'Financial Info': {
      alt: { curr: "1000", prev: "500"},
      auto: {curr: "2100"},
      bldgs: {curr: "12000", prev: "5000"},
      land: {curr: "30000", prev: "700"},
      machine: {curr: "25000", prev: "1000"},
      other: {curr: "2659", prev: "6000", exp: { curr: "900", expl: "9800", prev: "600"}},
      startup: {curr: "600", prev: "550"},
    },
    ID: 12208
 }

现在，您可以循环搜索所有带有＆＃39; curr＆＃39;或者＆＃39; prev＆＃39;价值，并总结。或者你可以总结一下＆＃39; curr＆＃39;和＆＃39; prev＆＃39;对于列表中的每个项目。以后项目名称的含义无关紧要 - 您从JSON对象中读取名称并显示其总和值。

因此，循环输出每个项目的名称和总和值：

土地：＆＃34; 1500＆＃34; （land.curr，land.prev）

机器：＆＃34; 26,000＆＃34; （machine.curr，machine.prev）等。

循环播放所有添加＆＃39; curr＆＃39;，＆＃39; prev＆＃39;和＆＃39; expl＆＃39;根据要求：

Total Curr：74,259（alt.curr，auto.curr，bldgs.curr，land.curr，machine.curr，other.curr，other.exp.curr和startup.curr）

总上一个：14,350（alt.prev，bldgs.prev，land.prev，machine.prev，other.prev，other.exp.prev，startup.prev）

Total Expl：9800（other.exp.expl）

这只是一个快速解释，但你也可以改变纯粹的对象＆＃39;以上是＆＃39;项目＆＃39;的数组。每个人都有一个名字＆＃39;以及一系列“数据”，每个数据＆＃39;具有＆＃39;类型＆＃39;的项目和一个＆＃39;价值＆＃39;。

Answer 5

行。所以我终于有了这个工作。感谢@amirsasson让球滚动，其他所有人都给了我他们所做的信息。我真的很感激。

因此，您可以使用以下方法减去，除以和乘以表达式值

{{ details['Financial Info'].land_curr - details['Financial Info'].land_prev }}

{{ details['Financial Info'].land_curr / details['Financial Info'].land_prev }}

{{ details['Financial Info'].land_curr * details['Financial Info'].land_prev }}

但是当我按照@amirsasson解决方案尝试添加它们时，它不会总结它们将它们并排放置的两个值。

所以我要做的是将表达式中的值乘以1，然后将它们一起添加：

${{ (details['Financial Info'].land_curr * 1 ) + (details['Financial Info'].land_prev * 1) }}

这完全符合我的需要。

感谢大家的帮助。

AngularJS - 抓取多个JSON密钥值，然后将它们一起添加

5 个答案: