Question

我有一系列请求“由一系列任务组成”。我需要每个Request的duration字段等于与每个Request相关联的任务的Duration字段的总和，并且能够对任务中的更改做出反应。

我尝试过angular.forEach，甚至只是一个javascript for循环。我认为有一个Angular简单的概念我不想这样做。请告诉我如何做到这一点。

我从这里开始，但意识到在将它们添加到一起之前我无法通过适用的Req_ID过滤任务 - 我需要一个WHERE子句（LOL）：

$scope.Requests.Duration = function($scope.Requests.id){
   return angular.forEach($scope.Tasks, function($scope.Tasks.Duration){
     // get the right tasks
   });
 }

这是我的控制器：

var app = angular.module('app',[]);

app.controller('MainController', function($scope){

 $scope.selRequest = 1;

  $scope.Requests = [
    {id: 1, Title: 'Make a web page', Duration: 0, TOR: 0},
    {id: 2, Title: 'Make a web service', Duration: 0, TOR: 0},
    {id: 3, Title: 'Make a web application', Duration: 0, TOR: 0}  
  ];
  $scope.Tasks = [
    {id: 1, Req_ID: 1, Title: 'Graphic Prototype', Duration: .5, TOT: 0},
    {id: 2, Req_ID: 1, Title: 'Develop CSS', Duration: 3.5, TOT: 0},
    {id: 3, Req_ID: 1, Title: 'Code in Editor', Duration: 6, TOT: 0},
    {id: 4, Req_ID: 2, Title: 'Write Stored Procedures', Duration: 10, TOT: 0},
    {id: 5, Req_ID: 2, Title: 'Build API', Duration: 6, TOT: 0},
    {id: 6, Req_ID: 3, Title: 'Build Static App', Duration: 12, TOT: 0},
    {id: 7, Req_ID: 3, Title: 'Build Data Store', Duration: 4, TOT: 0},
    {id: 8, Req_ID: 3, Title: 'Add Functionality to Static App', Duration: 6, TOT: 0}  
  ];

  $scope.showKids = function(id){
    $scope.selRequest = id;
  } // end fn

}); // end MainController

我创建了一个简单的视图来显示测试请求持续时间分配的相关任务。

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <table class="table table-striped">
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Duration</th>
      <th>TOR</th>
    </tr>
      <tr ng-repeat="req in Requests">
        <td>{{req.id}}</td>
        <td><a href="" ng-click="showKids(req.id)">{{req.Title}}</a></td>
        <td>{{req.Duration}}</td>
        <td>{{req.TOR}}</td>
      </tr>
    </table>
    <br /><br />
    <table class="table table-striped">
    <tr>
      <th>ID</th>
      <th>REQ</th>
      <th>Title</th>
      <th>Duration</th>
      <th>TOT</th>
    </tr>
      <tr ng-repeat="t in Tasks | filter: {Req_ID: selRequest}">
        <td>{{t.id}}</td>
        <td>{{t.Req_ID}}</td>
        <td>{{t.Title}}</td>
        <td><input type="text" style="width:50px;" name="Duration" data-ng-model="t.Duration" /></td>
        <td><input type="text" style="width:50px;" name="TOT" data-ng-model="t.TOT" /></td>
      </tr>
    </table>
  </body>

</html>

A Plunkr is here without the math functionality

Answer 1

我对你要找的东西做了一些假设。基本上，此处的关键是您可以向要跟踪的表单变量添加ng-change，然后调用函数以在该更改事件运行时重新计算总计。步骤如下：

将ng-change添加到相关字段

<td><input type="text" style="width:50px;" name="Duration" data-ng-model="t.Duration" data-ng-change="updateDuration(t.Req_ID)"/></td>
<td><input type="text" style="width:50px;" name="TOT" data-ng-model="t.TOT" data-ng-change="updateTotals(t.Req_ID)" /></td>

添加例程以更新总计

我只是为了简洁而展示一个。它们都在下面的plunker中，但基本相同。

$scope.updateDuration = function (sumId) {
  var sum = 0;
  for (var idx = 0; idx < $scope.Tasks.length; idx++) {
    if ($scope.Tasks[idx].Req_ID === sumId){
      sum += $scope.Tasks[idx].Duration * 1; // simple cast as int
    }
  }

  for (idx = 0; idx < $scope.Requests.length; idx++) {
    if ($scope.Requests[idx].id == sumId) {
      $scope.Requests[idx].Duration = sum;
    }
  }
};

请参阅更新的Plunker

http://plnkr.co/edit/UqWoxojnXCiJHdpYBcj5?p=info

AngularJS：总等于所有匹配对象的总和

1 个答案: