Как использовать ng-repeat для нескольких массивов объектов?

Итак, у меня есть эти 2 массива объектов. Я хочу использовать ng-repeat, чтобы он печатал элементы из countOfServicesCodesByElements с тем же индексом, что и дата. Итак, для начала даты: «09. 09. 2016», конец: «13. 09. 2016» он должен вывести 23 и т. Д.Как использовать ng-repeat для нескольких массивов объектов?

$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>

источник

2016-12-07 Tadej Vozlic

использовать '$ index' для поиска стоимости. то есть. '{{countOfServicesCodesByElements [$ index]}}' – haxxxton

Являются ли два массива 'countOfServicesCodesParts' и' countOfServicesCodesByElements' одинаковой длины? –

'{{countOfServicesCodesByElements [$ index] .count}}' – dfsq

ngRepeat предлагает несколько свойств, один из которых $index. Вы можете использовать такое свойство, пропуская первый массив для печати желаемых значений второго массива. Что-то вроде этого:

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

Имейте в виду, что это идеально работает с массивами одинаковой длины!

источник

2016-12-07 11:41:28 Sebastianb

в надежде, что ниже ваши требования ... но вы должны убедиться, что данные в $ scope.countOfServicesCodesByElements правильно индексироваться для значений в $ scope.countOfServicesCodesParts

<!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="[email protected]" 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>

источник

2016-12-07 11:45:44

приятное мышление ... – nisar

@nisar спасибо –

Попробуйте это:

<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 - это смещение итератора повторяющегося элемента.

Ref: https://docs.angularjs.org/api/ng/directive/ngRepeat

источник

2016-12-07 11:54:26

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

источник

2016-12-07 12:11:10

попробовать это.

<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 
     }] 

    });

источник

2016-12-07 12:15:01 Gourav

Как использовать ng-repeat для нескольких массивов объектов?

ответ

Смежные вопросы