Question

所以我有这两个对象数组。我想使用ng-repeat，因此它会在与日期相同的索引处打印countOfServicesCodesByElements中的元素。因此，对于日期开始：“09。09. 2016”，结束：“13。09. 2016”它应输出23，依此类推。

  $scope.countOfServicesCodesParts = [ {
        start: "09. 09. 2016",
        end: "13. 09. 2016"
      },
      {
        start: "15. 09. 2016",
        end: "18. 09. 2016"
      },
      {
        start: "27. 09. 2016",
        end: "30. 09. 2016"
      }
    ]
  $scope.countOfServicesCodesByElements = [{
        "count": 23
      },
      {
        "count": 30
      },
      {
        "count": 20
      },
      {
        "count": 2
      }
    ]

这是我的html文件

  <div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts" >
    <table class="table table-striped">
      <tr >
        <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
          date start {{date.start}} date end: {{date.end}}
        </span>
      </tr>
      <div >
        <tr >
          <td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
          <td class="col-md-2"><text class="text-info">{{countOfServicesCodesByElements.count}}</text></td>
        </tr>
      </div>
    </table>
  </div>

Answer 1

ngRepeat提供了多个属性，一个是$index。您可以在循环第一个数组时使用此类属性来打印第二个数组的所需值。像这样：

<li ng-repeat="arr1 in countOfServicesCodesParts">
    <span>{{countOfServicesCodesByElements[$index].count}}</span>
</li>

请记住，理想情况下，这可以使用相同长度的数组！

Answer 2

希望以下是您的要求...但您需要确保$ scope.countOfServicesCodesByElements中的数据已正确索引$ scope.countOfServicesCodesParts中的值

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts" >
    <table class="table table-striped">
      <tr >
        <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
          date start {{date.start}} date end: {{date.end}}
        </span>
      </tr>
      <div >
        <tr >
          <td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
          <td class="col-md-2"><text class="text-info">{{days($index)}}</text></td>
        </tr>
      </div>
    </table>
  </div>
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
   $scope.countOfServicesCodesParts = [ {
        start: "09. 09. 2016",
        end: "13. 09. 2016"
      },
      {
        start: "15. 09. 2016",
        end: "18. 09. 2016"
      },
      {
        start: "27. 09. 2016",
        end: "30. 09. 2016"
      }
    ]
        $scope.countOfServicesCodesByElements = [{
        "count": 23
      },
      {
        "count": 30
      },
      {
        "count": 20
      },
      {
        "count": 2
      }
    ];
    $scope.days=function(x){
      return $scope.countOfServicesCodesByElements[x].count;
    }
 
});
</script>
</html>

＆＃13;

Answer 3

试试这个：

 <div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts track by $index" >
    <table class="table table-striped">
      <tr >
        <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
          date start {{date.start}} date end: {{date.end}}
        </span>
      </tr>
      <div >
        <tr >
          <td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
          <td class="col-md-2"><text class="text-info">{{countOfServicesCodesByElements[$index].count}}</text></td>
        </tr>
      </div>
</table>

$index是重复元素的迭代器偏移量。

参考：https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 4

<ul>
  <li ng-repeat="(index, key) in countOfServicesCodesParts">
    <span>Start Date: {{ key.start_date}}</span>
    <span>Count: {{ countOfServicesCodesByElements[index].count}}</span>
   </li>
</ul>

Answer 5

试试这个。

<body ng-app="myApp">
  <div ng-controller="MyCtrl">
  <div class="card-content" ng-if="countOfServicesCodesEval != 0">
   <table class="table table-striped">
    <tr ng-repeat="date in countOfServicesCodesParts">
      <td> <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
      date start {{date.start}} date end: {{date.end}}
       number: {{countOfServicesCodesByElements[$index].count}}
    </span>
      </td>
    </tr>
  </table>
  </div>
 </div>
</body>

          var app = angular.module('myApp', []);
    app.controller('MyCtrl', function($scope) {
      $scope.countOfServicesCodesParts = [{
        start: "09. 09. 2016",
        end: "13. 09. 2016"
      }, {
        start: "15. 09. 2016",
        end: "18. 09. 2016"
      }, {
        start: "27. 09. 2016",
        end: "30. 09. 2016"
      }]
      $scope.countOfServicesCodesByElements = [{
        count: 23
      }, {
        count: 30
      }, {
        count: 20
      }, {
        count: 2
      }]

    });

如何在多个对象数组上使用ng-repeat？

5 个答案: