2016-08-08 2 views
0

Я отображение данных из базы данных (с использованием Web API) на странице:

<div ng-repeat="Item in Items"> 
    <div class="row"> 
     <div class="col-sm-3">{{Item.Id}}</div> 
     <div class="col-sm-3">{{Item.Desc)}}</div> 
     <div class="col-sm-6">{{Item.CollectionID}}</div> 

    </div> 
</div> 

выше работает отлично, но когда я пытаюсь получать фактическое Название коллекции, Я получаю вопрос:

<div ng-repeat="Item in Items"> 
    <div class="row"> 
     <div class="col-sm-3">{{Item.Id}}</div> 
     <div class="col-sm-3">{{Item.Desc)}}</div> 
     <div class="col-sm-6">{{GetCollectionName(Item.CollectionID)}}</div> 

    </div> 
</div> 

здесь моя функция контроллера для получения Название коллекции:

$scope.GetCollectionName = function (CollId) { 

     $http.get('http://Server/App/api/GetCollName/' + CollId). 
     then(function (result) { 
      $scope.CollectionName = result.data; 
      return $scope.CollectionName; 
     }); 
    } 

является есть ли лучший способ сделать это, кроме изменения моего базового запроса?

+0

Причина, по которой получает бесконечный цикл переваривания, потому что $ HTTP устанавливает переменную $ scope.CollectionName. Поскольку переменная $ scope изменена, она запускает обновление DOM для структурных угловых директив (ng-if, ng-repeat и т. Д.). Обновление элементов в ng-repeat затем повторное вызов GetCollectionName() для каждого элемента, который затем устанавливает $ scope, который затем запускает обновление DOM ... вы получаете смысл. Оно продолжается бесконечно. $ digest() имеет по умолчанию максимум 10 последовательных итераций, прежде чем он выйдет из строя, поэтому он не блокирует ваш браузер из-за бесконечного цикла, который является ошибкой, которую вы видите. – mhodges

ответ

0

Основная идея здесь заключается в использовании нг-инициализации для инициализации локальныхCollectionName переменных для каждого пункта в вашем ng-repeat. Затем вы можете использовать эту локальную переменную для вывода CollectionName[Item.CollectionID].

Here's a working demo

<div ng-repeat="Item in Items" ng-init="GetCollectionName(Item.CollectionID)"> 
    <div class="row"> 
     <div class="col-sm-3">{{Item.Id}}</div> 
     <div class="col-sm-3">{{Item.Desc)}}</div> 
     <div class="col-sm-6">{{CollectionName[Item.CollectionID]}}</div> 
    </div> 
</div> 


$scope.CollectionName = []; 
$scope.GetCollectionName = function (CollId) { 
    $http.get('http://Server/App/api/GetCollName/' + CollId) 
    .then(function (result) { 
     $scope.CollectionName[CollId] = result.data; 
    }); 
} 
+0

То же самое происходит – ElenaDBA

+0

@ElenaDBA Убедитесь, что у вас нет ссылки на GetCollectionName() внутри {{}}.Этот код как есть не должен создавать бесконечный цикл дайджеста – mhodges

+0

, чем я не вижу, как вызывается $ scope.GetCollectionName? – ElenaDBA

0
$scope.GetCollectionName = function (CollId) { 

    if(!$scope.someDataCheck[CollId] && !$scope.someData[CollId]){ 
$scope.someDataCheck[CollId] = true; 
$http.get('http://Server/App/api/GetCollName/' + CollId). 
    then(function (result) { 
     $scope.someDataCheck[CollId] = false; 
     $scope.someData[CollId].data = result.data; 
    }); 
} 

    return $scope.someData[CollId]; 
} 
+0

Это будет возвращать {} каждый раз из-за асинхронного характера. – mhodges

+0

исправлено для работы с контроллером. – KoIIIeY

+0

. Я не думаю, что вы понимаете основную проблему с этим подходом. Функция не будет ждать завершения вашего вызова $ http до того, как он выполнит return, если вы не используете $ q или другой метод отложенного обещания – mhodges

0

Плохо практиковать вызов функции внутри цикла. И вы используете тег выражения в angularjs, который создает наблюдателя. Всегда убедитесь, что все необходимые записи для отображения уже находятся в связанной переменной области видимости.

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