How to NOT fetch a single item in an array using angularjs $resource/$http fetch?

Question

I have a list view and a detailsView displayed side by side on the same screen, and it works fine. I am looking for a way to avoid fetching one single item that is "currently active" in the details view. The code in the List and detail controllers are as below, can post markup, etc if required.

I) detailsView

'use strict';

angular.module('states.phones.detail')    
.controller('PhoneDetailCtrl', ['$scope', 'phoneService', '$http', '$stateParams', 'angularGridInstance', 'Phone',
    function($scope, phoneService, $http, $stateParams, angularGridInstance, Phone, ) {
        console.debug('[states.phones.detail.controller()]');



        Phone.query()
            .$promise
            .then(function(data) {

                $scope.phones = data;
                $scope.page = 0;
                $scope.loadingMore = false;

                $scope.select = function(phone) {
                    $scope.selected = phone;
                }
                $scope.selected = {};

                $scope.selected = Phone.get({ phoneId: $stateParams.phoneId }, function(phone) {
                    $scope.mainImageUrl = phone.images[0];
                });

                $scope.setImage = function(imageUrl) {
                    $scope.mainImageUrl = imageUrl;



                    $scope.loadingMore = false;

                    $scope.loadMore = function() {
                        for (var i = 0; i = $scope.page; i++) {
                            $scope.phones.push(i++)[i];
                        }




                    }

                }

                $scope.loadMore = function() {
                    for (var i = 0; i = $scope.page; i++) {
                        $scope.phones.push(i++)[i];
                    }

                    function select($scope, $rootScope) {
                        $scope.select = function() {
                            var phoneslist = angularGridInstance[this];

                            angularGridInstance.phones.refresh();
                            $scope.$broadcast('select()');
                        };
                    }

                    var promise = $http.get('static-assets/phones/phones.json', { params: { phoneId: 'phones' } });
                    promise.then(function(data) {
                        var phonesTmp = angular.copy($scope.phones);
                        phonesTmp = phonesTmp.concat(data.data);
                        $scope.phones = phonesTmp;

                        $scope.loadingMore = false;

                    }, function() {
                        $scope.loadingMore = false;
                    });

                    return promise;
                };
            })
    }
])

---

II) ListView:

(function() {


    'use strict';

    angular.module('states.phones.list')


        .controller('PhoneListCtrl', ['$scope', 'phoneService', '$q', '$http', '$rootScope', "$localStorage", "$sessionStorage", 'angularGridInstance', 'Phone',
            function($scope, phoneService, $q, $http, $rootScope, $localStorage, $sessionStorage, angularGridInstance, Phone) {
                console.debug('[states.phones.list.controller()]');



                $scope.card = {};
                var phoneslist = angularGridInstance[this];
                $scope.page = 0;
                $scope.phones = [];
                $scope.loadingMore = false;

                $scope.loadMore = function() {
                    for (var i = 0; i = $scope.page; i++) {
                        $scope.phones.push(i++)[i];
                    }

                    function select($scope, $rootScope) {
                        $scope.select = function() {
                            var phoneslist = angularGridInstance[this];

                            angularGridInstance.phones.refresh();
                            $scope.$broadcast('select()');
                        };
                    }


                    var promise =
                        $http.get('static-assets/phones/phones.json', {
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            params: { phoneId: 'phones' }
                        });
                    promise.then(function(data) {
                        var phonesTmp = angular.copy($scope.phones || []);
                        phonesTmp = phonesTmp.concat(data.data);
                        $scope.phones = phonesTmp;

                        $scope.loadingMore = false;

                    }, function() {
                        $scope.loadingMore = false;
                    });

                    return promise;
                };
                $scope.loadMore();

            }


        ]);
}());

Answer 1

The technique of replacing functions on-the-fly should be avoided. It tangles state and functions in a way that makes code hard to understand, debug, test, and maintain. XHRs should only put data on scope, not functions.

How do I omit a single item from the list if it is already 'active' in detailsView?

I am more inclined to highlight the active item on the list. I also would disable the click handler, not add and remove it.

<div ng-repeat="item in list" ng-class="{highlight: $index == active}">
     {{item.name}}
     <button ng-disabled="active == $index" ng-click="showDetail(item)">
        Show Detail
     </button>
</div>