如何在 ng-repeat 上获得两个控制器的结果

Question

我想在同一个 ng-repeat 中获取两个对象的值

$http.get('/api/PreviewPayroll').success(function (data){
    //alert(data[0].empID);
    $scope.allowance = data;
});

$http.get('/api/Deduction').success(function (data){
    //alert(data[0].empID);
    $scope.Deduction = data;
});

<tr ng-repeat="item in allowance && ng-repeat="value in Deduction">
    <td>{{ item.empID }}</td>
    <td>{{ value.empID }}</td>
</tr>

如何在同一个 ng-repeat 上获得两个范围对象

Answer 1

所以你会想要合并数据。

你可以使用$q.all(promises):

var promise1 = $http.get('/api/PreviewPayroll');

var promise2 = $http.get('/api/Deduction');

$q.all([promise1, promise2]).then(function (results) {
    var allowances = results[0];
    var deductions = results[1];

    var combinedList = /* some combination logic */;
});

通过使用$q.all()，您可以确保在尝试合并任何内容之前拥有两个数据列表。您可以轻松地使用它来获得所需的效果。例如，如果您不在乎其他列表是否不可用。

然后您可以使用ng-repeat 来迭代新的组合列表：

<tr ng-repeat="item in combinedList">
    <td>{{ item.allowance.empID }}</td>
    <td>{{ item.deduction.empID }}</td>
</tr>

allowance 和 deduction 的子属性基于您的组合列表。

然而

老实说，服务器端以您需要的格式为您提供数据显示。（即业务逻辑在受控环境中保持服务器端）。我认为视图应该只处理视图逻辑，例如按钮操作等。

但这是我的看法，也是我认为最简单的方法。

另一个说明

我更喜欢将视图逻辑保留在 JavaScript 中，因此我在此处合并数据。而不是试图在 HTML 中做一些过于复杂的角度表达式。

Answer 2

您可以有一个嵌套的ng-repeat，也可以将two objects 合并为一个。

 <table>
  <tbody ng-repeat="row in mainCombinedObject">
    <tr>
      <th>{{row.empID}}</th>
    </tr>
    <tr ng-repeat="sub in row.subObject">
      <td>{{sub.empID}}</td>
    </tr>
  </tbody>
</table>

Answer 3

你不能这样做！如果您的津贴和扣除额相同，则必须将它们混合在集合中，如下所示：

var array = [
    { allowance: value1, Deduction: value2},
    { allowance: value3, Deduction: value4},
    ...
];

他们在视图中使用它：

    <tr ng-repeat="item in array">
        <td>{{ item.allowance.empID }}</td>
        <td>{{ item.Deduction.empID }}</td>
    </tr>

Answer 4

将$scope.allowance 和$scope.Deduction 组合到一个对象列表"combined" 然后执行您的ng-repeat：

 <tr ng-repeat="c in combined">
        <td>{{ c.someField }}</td>
        <td>{{ c.someOtherField }}</td>
    </tr>