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

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

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

Answer 4

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

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>

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

4 个答案:

然而

另一个注意事项