Question

我有一个列表视图和一个detailsView在同一屏幕上并排显示，并且工作正常。我正在寻找一种避免在详细信息视图中获取“当前处于活动状态”的单个项目的方法。 List和detail控制器中的代码如下，可以根据需要发布标记等。

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

应避免动态替换功能的技术。它以使代码难以理解，调试，测试和维护的方式缠结状态和功能。 XHR应该只将数据放在作用域上，而不能放在函数上。

如果在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获取数组中的单个项目？

1 个答案: