如何使用 angularjs $resource/$http fetch 不获取数组中的单个项目？

Question

我在同一屏幕上并排显示了一个列表视图和一个详细信息视图，并且工作正常。我正在寻找一种方法来避免在详细信息视图中获取 "currently active" 的单个项目。 List和detail controller中的代码如下，如果需要可以post标记等。

一）详情查看

'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;
                };
            })
    }
])

二）列表视图：

(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

替换函数的技巧on-the-fly应该避免。它以一种使代码难以理解、调试、测试和维护的方式将状态和函数纠缠在一起。 XHR 应该只将数据放在作用域上，而不是函数上。

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

我更倾向于突出显示列表中的活动项。我也会禁用点击处理程序，而不是添加和删除它。

<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>

如何使用 angularjs $resource/$http fetch 不获取数组中的单个项目？

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

angularjs

angularjs-scope