Не обновляется отображение из scope в Angular?

Question

[andy301086]

Всем привет. Недавно начал изучать Angular и писать небольшое приложение. Столкнулся с небольшой проблемой.
У меня есть страница, на которой выводится список элементов, этот список формируется в зависимости от выбранного фильтра (т.е. выбирают по ссылке имя города и через запрос получаются данные с сервера). Код контроллеров и разметки представлен ниже:

<section id="showcase" ng-show="catalogShow == true">
    <div class="container fadeOut">
        <div class="row wow fadeInDown" data-wow-duration="500ms">
            <div class="col-lg-12">
                <!-- section title -->
                <div class="title text-center">
                    <h2>Каталог <span class="color"></span></h2>
                    <div class="border"></div>
                </div>
                <!-- /section title -->
                <!-- portfolio item filtering -->
                <div class="portfolio-filter clearfix" ng-controller="Filter">
                    <ul class="text-center">
                        <li><a href="javascript:void(0)" ng-click="filterByCategory(-1)" class="filter" data-val="-1" data-filter="all">Все</a></li>
                        <li><a href="javascript:void(0)" ng-click="filterByCategory(1)" class="filter" data-val="1" data-filter=".march8">8 Марта</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-val="15" data-filter=".happyBirtday">День Рождение</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-val="48" data-filter=".romance">Романтика</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-va="14" data-filter=".rose">Розы</a></li>
                        <li><a href="javascript:void(0)" class="filter" data-val="" data-filter=".toys">Игрушки</a></li>
                    </ul>
                </div>
                <!-- /portfolio item filtering -->
            </div> <!-- /end col-lg-12 -->
        </div> <!-- end row -->
    </div>	<!-- end container -->
    <!-- portfolio items -->
    <div class="portfolio-item-wrapper wow fadeInUp" data-wow-duration="500ms">
        <ul id="og-grid" class="og-grid">
            <!-- single portfolio item -->
            <li class="mix app fadeInUp flowerItem" data-wow-duration="500ms" ng-repeat="item in catalogItems">
                <a href="javascript:void(0)" data-largesrc="http://staging.test.ru{{item.MainImageUrl}}" data-title="{{item.Name}}" data-description="{{item.Name}}">
                    <img ng-src="http://staging.test.ru{{item.MainImageUrl}}" alt="{{item.Name}}" class="size-300x250">
                    <div class="hover-mask">
                        <h3>{{item.Name}}</h3>
                        <span>
                            <i class="fa fa-plus fa-2x"></i>
                        </span>
                    </div>
                </a>
            </li>
        </ul> <!-- end og grid -->
    </div>  <!-- portfolio items wrapper -->
</section>   <!-- End section -->

AngularJS

flApp.controller('Filter', function ($scope, $http) {
    $scope.catalogItems = [];
    
    $scope.filterByCity = function (cityId) {
        $scope.catalogShow = true;
        $scope.selectedCity = cityId;
        var urlString = 'http://staging.test.ru/RegionId=' + cityId;

        $http({
            url: urlString,
            headers: { " },
            method: 'GET'
        }).success(function (data, status, headers, config) {
            $scope.catalogItems = data.Items;
        });
    };
    
    $scope.filterByCategory = function (categoryId) {
        var urlString = 'http://staging.test.ru/partnerRegionId=' + $scope.selectedCity;
        $http({
            url: urlString,
            headers: { * },
            method: 'GET'
        }).success(function (data, status, headers, config) {
            $scope.catalogItems = data.Items[0];
        });
    };
});

Урлы указаны тестовые. Когда срабатывает filterByCity то отображение обновляется, когда срабатывает filterByCategory, то отображение не срабатывает (хотя функция выполняется). Что то значит делаю не так. Хотелось бы получить ответ что не так, и почему? Заранее спасибо всем кто прочел этот вопрос.

Answer 1

[enixpp]

Вы уверены что сервер вернет 200?

Comments

[andy301086]

Данные с сервера приходят - проверял и функция срабатывает.

[enixpp]

andy301086: Сейчас вы отправляете один и тот же запрос (+ неправильно присвоете данные на $scope.catalogItems) и ждете разних результатов.
Вы должны использовать categoryId для фильтера,
и присвоит на $scope.catalogItems данные (массив/обьект) полученные из сервера а не первый результать(data.Items[0]).

[andy301086]

если я правильно понял, то нужно в первом запросе грузить все данные, а потом только фильтровать?

[andy301086]

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

[enixpp]

andy301086: Нет, я имел ввиду сервер должень вернут отфильтрованные данные !
Второй запрос будет примерно такой:

$scope.filterByCategory = function (categoryId) {
        var urlString = 'http://staging.test.ru/partnerRegionId=' + $scope.selectedCity;
        $http({
            url: urlString,
            headers: { * },
            method: 'GET',
            config:{
                params:{
                    categoryId: cateforyId
                }
            }
        }).success(function (data, status, headers, config) {
            $scope.catalogItems = data.Items;
        });
    };

[enixpp]

Ну если у вас все нужные данные уже получены то отфильтруйте их !

[andy301086]

Элбек Азимов: а такой вопрос. Сервер не может вернуть отфильтрованные данные по всем параметрам. Поэтому я руками хотел фильтровать и загружать в $scope.catalogItems. КАК ЭТО СДЕЛАТЬ?
Для этого загрузил data.Items[0], т.е. первый элемент массива, и рассчитывал что angular обновит отображение, но этого не произошло, поэтому и задался вопросом.

[enixpp]

andy301086: Используйте фильтры:

app.filter('customFilter', function(){
    return function (items, search) {
        // отфильтруйте .....
        return items;
    }
})

а в разметке:

ng-repeat="item in catalogItems | customFilter:catalogId "

а вместо ng-click="filterByCategory(-1)"
ng-click="catalogId = -1"

[andy301086]

Спасибо так наверное и сделаю, только остался небольшой вопрос (возможно есть пример). Можно ли как то получать данные частично (например для пагинации) и отображать через ангулар?

[enixpp]

andy301086: Если сервер ваш то отдайте данные частично (http://ваш_сервер/resources?page=1).
Если пользуетесь чей то апи тогда посмотрите документацию.

[andy301086]

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

[enixpp]

andy301086: Да!

Answer 2

[Сергей Протько]

$scope.catalogItems = data.Items[0];

меня оочень смущает эта конструкция... консоль точно не ругается ни на что?

Comments

[andy301086]

Это я хотел вывести одну запись из массива и чтобы она отобразилась. Массив содержит 18 записей. Но отображение никак не меняется.

[Сергей Протько]

andy301086: ну... тип... в вместо коллекции пихаете айтем коллекции... ну и да, попробуйте обернуть все в $timeout.

[andy301086]

добавил после $scope.catalogItems = data.Items[0]
$timeout(function () {

console.log("erro");

}, 5);
Не помогло

[Сергей Протько]

andy301086: оформите пример на plnkr.co

[andy301086]

plnkr.co/edit/HLu5WRO4tGoz6QbKMSXh
код выложил. единственное только не знаю правильно ли оформил. Заранее спасибо

Answer 3

[lega]

В каталоге в итоге массив лежит или нет?
$scope.catalogItems = [data.Items[0]];

Comments

[andy301086]

да, массив

Answer 4

[Дмитрий Вапельник]

во-первых, из приведенного кода вижу, что у Вас <h3>{{item.Name}}</h3> находится вне контроллера. возможно, у Вас есть еще один, внешний контроллер
если с контроллерами все ОК, то попробуйте сделать $scope.$apply() после обновления данных, но это dirtyhack. недвано наткнулся на SefeApply https://coderwall.com/p/ngisma/safe-apply-in-angular-js