Выполнение функции внутри ng-repeat в AngularJS

Question

Я хотел бы выполнить функцию внутри ng-repeat, чтобы извлечь некоторые другие данные для отображения.

Например, у меня есть список квартир. Я показываю этот список, используя ng:repeat, чем для каждой квартиры, которую я хотел бы показать Владельцу, то есть не u.Apartments. Поэтому моя функция getInq позвонит в службу, чтобы получить владельца указанной квартиры. Для меня это логично, но это не работает. Он возвращает "10 $digest() iterations reached. Aborting!" ошибка.

Я этот код:

<div ng:repeat="u in units"> 
      <div ng:repeat="a in u.Apartments"> 
       <div class="targhetta" style="margin-top:10px">{{a.Name}}</div> 
       <br />{{getInq(a.ApartmentId)}} 
       <table> 
        <tr ng:repeat="cs in a.CS"> 
         <td>{{cs.Position}}</td> 
         <td>{{cs.Code}}</td> 
        </tr> 
       </table> 
      </div> 
     </div> 

И в контроллере:

$scope.getInq = function (idApp) { 
      $http.get('http://localhost:8081/api/registry/GetLastInq?processdata=' + (new Date()).getTime() + '&appartamentoId=' + idApp, { headers: headers }) 
      .success(function (data2) { 
       $scope.nomeInquilinoVw = data2.Name; 
       $scope.cognomeInquilinoVw = data2.Surname; 
       $scope.nomeCognome = $scope.nomeInquilinoVw + " " + $scope.cognomeInquilinoVw; 
      }) 
      .error(function() { 
       $scope.success = false; 
       $scope.error = "There was an error!"; 
      }); 
      return $scope.nomeCognome; 
     } 

Любые предложения?

Answer 1

Вы должны создать настраиваемый пропуск директивы в любых данных, которые вы хотите от ng-repeat, и выполнить любое действие, которое вы хотите. Директива будет срабатывать свою функцию канала на каждом цикле нг повторов

var app = angular.module('myApp', []) 
 
.controller('myCtrl', function($scope){ 
 
    
 
    $scope.data = ['a', 'b', 'c']; 
 
    
 
}) 
 
.directive('myDirective', function(){ 
 
    return { 
 
    restrict: "A", 
 
    template: '<div>{{ myDirective }}</div>', // where myDirective binds to scope.myDirective 
 
    scope: { 
 
     myDirective: '=' 
 
    }, 
 
    link: function(scope, element, attrs) { 
 
     console.log('Do action with data', scope.myDirective); 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 

 
    <div ng-controller="myCtrl"> 
 
    
 
    <ul> 
 
     <li ng-repeat="item in data" my-directive="item">{{ item }}</li> 
 
    </ul> 
 
    
 
    </div> 
 
    
 
</div>

Проверьте вашу консоль для действия

Answer 2

Не используйте {{getInq(a.ApartmentId)}} в вашем html. Он будет генерировать очень много http-запросов, поэтому вы получаете сообщение об ошибке.

Вместо этого вызовите эту функцию для каждого элемента, который требуется от вашего контроллера, и добавьте переменную $scope.units в нужное место. Это приведет к тому, что будет достаточно HTTP-запроса, и как только вы их получите, перестанет работать больше.

Answer 3

причины, почему эта ошибка случается:

getInq возвращение $ scope.nomeCognome и $ scope.nomeCognome меняются каждый раз, когда ng-repeat повторяет сборку, каждое изменение вызывает цикл $ digest, что приведет к ужасному результату. вам следует избегать чего-то подобного, что усложнит процесс $ digest.

Answer 4

угловые директивы используются для манипуляции двухсторонним связыванием данных, вы не должны вызывать методы, как вы показали специально из двух ng-repeat, они в основном представляют собой петли. Это также замедлит загрузку вашей страницы. вы должны правильно создать JSON для привязки данных в контроллере. ниже должны быть вам HTML код:

<div ng:repeat="u in units"> 
      <div ng:repeat="a in u.Apartments"> 
       <div class="targhetta" style="margin-top:10px">{{a.Name}}/div> 

       <table> 
        <tr ng:repeat="cs in a.CS"> 
         <td>{{cs.Position}}</td> 
         <td>{{cs.Code}}</td> 
        </tr> 
       </table> 
      </div> 
     </div> 

и в контроллере, вы должны создать JSON, как

units=[ 
     { u.Appartment:[{a.cs[value1,value2]},{},{}]},{},{}] 

что-то вроде этого

for(var i=0; i<u.Apartment.length;i++) 
{ 

    u.Apartment[i].cs=$scope.getInq(u.Apartment[i].Id); 
}