Использование $ http.get в ng-repeat вызывает множество ошибок

Question

Использование $ http.get в ng-repeat вызывает множество ошибок

0

У меня есть функция, которая возвращает массив элементов по идентификатору группы. Вот:

var getChoices = function (groupId) {
    var request = $http.get(_baseUrl + 'choice', { params: { choiceGroupId: groupId } });

    return request.then(function(result) {
        if (resources.ok(result)) {
            return result.data.items;
        }
    }, function(error) {

    });
}

Он отлично работает, когда я привязываю его к кнопке, но когда я пытаюсь сделать ng-repeat над результатами этой функции, у меня есть несколько ошибок в консоли браузера.

<md-list>
    <md-list-item ng-repeat="choice in getChoices(choiceGroupId)">
        {{choice}}
    </md-list-item>
</md-list>

Я тоже стараюсь, но результат тот же.

<md-list ng-init="choices = {{getChoices(choiceGroupId)}}">
    <md-list-item ng-repeat="choice in choices">
        {{choice}}
    </md-list-item>
</md-list>

Я видел ответы на такие вопросы, но люди предлагали сделать запрос в контроллере, затем заполнить массив данными и перебрать значения массива, но это не подходит моему случаю, потому что мне нужен этот choiceGroupId из пользовательского интерфейса боковая сторона.

Похоже, браузер пытается оценить запрос запроса на каждый тик, и происходит что-то вроде переполнения. Как я могу обработать это, чтобы вызвать "get" один раз, а затем перебрать полученный результат?

Alexey Koptyaev 18 авг. 2016, в 14:37

Источник

1

Вы должны сохранить результат выбора в переменную области видимости, например scope.choices = return result.data.items; вместо return result.data.items; и используйте ng-repeat следующим образом: ng-repeat="choice in choices" . В ng-init вам просто нужно вызвать getChoices(choiceGroupId) чтобы выполнить запрос ajax
Olivier Boissé 18 авг. 2016, в 12:05
1

Обычно, когда вы хотите вызвать этот тип сервисов, вы создаете его новый экземпляр. В вашем случае может показаться, что вы вызываете каждый раз один и тот же экземпляр. Я бы попытался вызвать функцию, которая создает новую переменную, которой вы назначаете функцию, а затем вызывает функцию. Примите во внимание также пример обещания.
FDavidov 18 авг. 2016, в 12:06
0

Спасибо, парни. Я сделал, как сказал @oliv37 oliv37, и теперь он работает нормально. После этого choiceGroupId был undefined потому что он был взят до загрузки формы, я полагаю. Но я обернул свою функцию с помощью $scope.$on('dataLoaded') и после этого все работает отлично. Спасибо!
Alexey Koptyaev 18 авг. 2016, в 12:36

Показать ещё 1 комментарий

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Вы должны сохранить результат выбора в переменную области видимости, например scope.choices = return result.data.items; вместо return result.data.items; и используйте ng-repeat следующим образом: ng-repeat="choice in choices" . В ng-init вам просто нужно вызвать getChoices(choiceGroupId) чтобы выполнить запрос ajax
Обычно, когда вы хотите вызвать этот тип сервисов, вы создаете его новый экземпляр. В вашем случае может показаться, что вы вызываете каждый раз один и тот же экземпляр. Я бы попытался вызвать функцию, которая создает новую переменную, которой вы назначаете функцию, а затем вызывает функцию. Примите во внимание также пример обещания.
Спасибо, парни. Я сделал, как сказал @oliv37 oliv37, и теперь он работает нормально. После этого choiceGroupId был undefined потому что он был взят до загрузки формы, я полагаю. Но я обернул свою функцию с помощью $scope.$on('dataLoaded') и после этого все работает отлично. Спасибо!

Jekin Kalariya · Answer 1 · 2016-08-18T10-15-00.000Z

Проверьте Если переменная выбора имеет дублирование значения, если да, чем пример ниже кода

<md-list>
    <md-list-item ng-repeat="choice in choices track by $index">
        {{choice}}
    </md-list-item>
</md-list>



var getChoices = function (groupId) {
    var request = $http.get(_baseUrl + 'choice', { params: { choiceGroupId: groupId } });

    return request.then(function(result) {
        if (resources.ok(result)) {
            $scope.choices= result.data.items;
        }
    }, function(error) {

    });
}

Спасибо за ваш ответ, но проблема была в другом.