如何在AngularJS中访问两个网页之间的过滤对象数组？

我想在选择当前页面上的项目时访问下一页当前页面上显示的过滤对象数组

app.js Controllers.js index.html

未加载应用程序数据，请单击此处重试。

---

比如说，我在网页1上得到了“cat3”的过滤对象数组作为链接列表。当我从筛选列表中选择链接时，我会在第2页上显示所选项目的详细信息。我想使用“上一步”和“下一步”按钮或左右滑动手势逐一迭代过滤对象数组中每个项目的详细信息。

使用角度服务在appMya的各个部分共享数据很有用使用角度服务在appMya的各个部分共享数据很有用

var App = angular.module('App', 
    ['ngMaterial', 'ui.router', 'ngSanitize', 'customFilters', 'pager', 
    'pagerDirective']);

App
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/home");

    $stateProvider.state('home', {
        url: '/home',
        templateUrl:"./home.tpl.html"
    })
    .state('List', {
        url: '/List',
        templateUrl: './views/card-ui/list-card.html',
        // templateUrl: '/views/list.html',
        controller: 'ListController'
    })
    .state('Details', {
        url: '/Details',
        params: {padaIndex: null},
        templateUrl: './views/card-ui/details-card.html',
        // templateUrl: '/views/details.html',
        controller: 'DetailsController'
    })
});

App
.controller('ListController', function($scope, $state, PagerService) {
// .controller('ListController', function($scope, $state) {

    // Private Data
    var selectedCategory = null;
    /**** New Addition ****/
    var selectedAuthor = null;
    /**** End New Addition ****/

    // Model Data
    $scope.orderPada = '';

    // Assigns user selected Category to private variable selectedCategory
    $scope.selectCategory = function(newCategory) {
        selectedCategory = newCategory;
    }

    // Filter padas by selected Category
    $scope.categoryFilterFn = function(pada) {
        return selectedCategory == null || 
            pada.category == selectedCategory;
    }

    /**** New Addition ****/
    // Assigns user selected Author to private variable selectedAuthor
    $scope.selectAuthor = function(newAuthor) {
        selectedAuthor = newAuthor;
    }

    // Filter padas by selected Author
    $scope.authorFilterFn = function(pada) {
        return selectedAuthor == null || 
            pada.author == selectedAuthor;
    }
    /**** End of new addition ****/

    /***
     * Navigate to padadetails
     */
    $scope.navigatePadaDetails = function(url, params) {
        $state.go(url, params);
    }
});

App
.controller("DetailsController", function($scope, $stateParams, $state, $filter) {
    var counter = Number($stateParams.padaIndex);

    $scope.whichPada = Number($stateParams.padaIndex);
    $scope.oPada = $scope.data.padas[$scope.whichPada];
    $scope.padaCat = '';
    $scope.padaAuthor = '';
    $scope.padaQry = '';
    $scope.orderPada = '';
    $scope.direction = '';

    // Filter & sort
    $scope.filteredPadas = $filter('filter')($scope.data.padas, 
        $scope.padaCat); 
    $scope.filteredPadas = $filter('filter')($scope.filteredPadas, 
        $scope.padaAuthor); 
    $scope.filteredPadas = $filter('filter')($scope.filteredPadas, 
        $scope.padaQry); 
    $scope.filteredPadas = $filter('orderBy')($scope.filteredPadas, 
        $scope.orderPada, $scope.direction);

    // Swipe gestures
    // Material code
    $scope.onSwipeLeftPadaDetails = function(ev, target) {
        // alert('You swiped left!!');

        // Goto next pada
        $scope.navigateNextPada('PadaDetails', {padaIndex: counter});
    };

    $scope.onSwipeRightPadaDetails = function(ev, target) {
        // alert('You swiped right!!');

        // Goto previous pada
        $scope.navigatePrevPada('PadaDetails', {padaIndex: counter});

    };


    /***
     * Skips a pada to previous or next
     */
    $scope.skipPada = function(padaId, nSkip) {
        var newPadaIndex = null;

        // if (padaId && nSkip) {
        if ($scope.skipPada.arguments.length == 2) {
            // make padaId 0 based
            // padaId = padaId - 1;

            // Previous
            if (nSkip < 0) {
                // Add nSkip since it has signed value(-1)
                if (padaId + nSkip < 0) {
                    // numberOfPadas = data.padas.length-1
                    newPadaIndex = $scope.numberOfPadas;
                } else {
                    newPadaIndex = padaId + nSkip;
                }
            }

            // Next
            if (nSkip > 0) {
                // numberOfPadas = data.padas.length-1
                if (padaId + nSkip > $scope.numberOfPadas) {
                    newPadaIndex = 0;
                } else {
                    newPadaIndex = padaId + nSkip;
                }
            }
        }
        return newPadaIndex;
    };

    /***
     * Navigate to previous pada
     */
    $scope.navigatePrevPada = function(url, params) {
        var prevPada;

        prevPada = $scope.skipPada(params.padaIndex, -1);
        params.padaIndex = prevPada;
        $state.go(url, params);
    };

    /***`enter code here`
     * Navigate to next pada
     */
    $scope.navigateNextPada = function(url, params) {
        var nextPada;

        nextPada = $scope.skipPada(params.padaIndex, 1);
        params.padaIndex = nextPada;
        $state.go(url, params);
    };

});

<md-content flex>
    <!-- Search/Filter Card -->
    <md-card md-theme="{{ appDefaults.showDarkTh`enter code here`eme ? 'dark-blue' : 
    appDefaults.theme || 'default' }}">
        <md-card-header layout ng-click="showSearch=!showSearch">
            <md-card-avatar class="md-user-avatar">
                <md-icon md-svg-src="img/material/baseline-search-24px.svg"> 
                </md-icon>
            </md-card-avatar>
            <md-card-header-text>
                <div class="md-headline">खोजें</div>
                <div class="md-subhead">क्रमबद्ध करें</div>
            </md-card-header-text>
        </md-card-header>

        <!-- Card contents -->
        <div ng-show="showSearch">
            <md-card-content>

                <label arial-label="category">पद श्रेणी चुनें</label>
                <md-select ng-model="catgry" ng- 
                change="selectCategory(catgry)">
                    <md-option value="">सभी श्रेणी</md-option>
                    <md-option value={{catgry}} 
                        ng-repeat="catgry in data.padas | orderBy:'category' | 
                        unique: 'category'">
                        {{catgry}}
                    </md-option>
                </md-select>

                <label aria-label="author">पद रचयिता चुनें</label>
                <md-select ng-model="authr" ng- 
                       change="selectCategory(authr)">
                    <md-option value="">सभी रचयिता</md-option>
                    <md-option value={{authr}} 
                        ng-repeat="authr in data.padas | orderBy:'author' | 
                        unique: 'author'">
                        {{authr}}
                    </md-option>
                </md-select>

                <md-input-container>
                    <label aria-label="pada search">पदों में खोजें</label>
                    <input type="text" ng-model="padaQry" />   
                </md-input-container>

                <md-radio-group ng-model="direction">
                    <md-radio-button value="" aria-label="आरोही क्रम">आरोही 
                        क्रम
                    </md-radio-button>    
                    <md-radio-button value="reverse" aria-label="अवरोही 
                        क्रम">अवरोही क्रम
                    </md-radio-button>
                </md-radio-group>
            </md-card-content>
        </div>
    </md-card>

    <div>
    <md-card  ng-repeat="pada in (filteredPadas = (data.padas | 
    filter:categoryFilterFn | filter:authorFilterFn | filter:padaQry | 
    orderBy:orderPada:direction))" 
    ng-click="navigatePadaDetails('PadaDetails', {padaIndex: pada.padaID- 
           1})">
        <md-card-header>
            <md-card-header-text>
                <span class="md-title">
                    {{pada.padaSankhya}}
                </span>
                <span class="md-subhead">
                    पृष्ठ: (ट. {{pada.pageNo}})/(गो. {{pada.gorelalPg}})
                </span>
            </md-card-header-text>
        </md-card-header>

        <md-card-content>
            <md-card-title-text>
                <p class="md-subhead">{{pada.author}} कौ पद:</p>
                <p class="md-headline">{{pada.title}}</p>
                <p class="md-subhead">श्रेणी - {{pada.category}}</p>
            </md-card-title-text>
        </md-card-content>
        <!-- <md-card-actions></md-card-actions> -->
        <md-footer layout layout-padding="">
            <span flex layout-align="start start">
                {{pada.lyrics.length}} पंक्तियाँ
            </span>
            <span flex layout-align="end start">
                {{$index + 1}}/{{filteredPadas.length}}
            </span>
        </md-footer>
    </md-card>
    </div>
</md-content>

 <md-content>
     <md-card 
     md-swipe-left="onSwipeLeftPadaDetails($event, $target)"
     md-swipe-right="onSwipeRightPadaDetails($event, $target)">
     <!-- md-swipe-up="onSwipeUpPadaDetails($event, $target)" -->
     <!-- md-swipe-down="onSwipeDownPadaDetails($event, $target)"> -->
         <md-card-header>
             <md-card-avatar>
                <img ng- 
                   src="img/material/ic_lightbulb_outline_black_48px.svg" 
                alt="light-bulb">
             </md-card-avatar>

             <md-card-header-text>
                <span class="md-title">{{oPada.padaSankhya}}</span>
                <span class="md-subhead">पृष्ठ: (ट. {{oPada.pageNo}}) / (गो. 
                {{oPada.gorelalPg}})</span>
             </md-card-header-text>
         </md-card-header>

         <md-card-title-text layout-padding>
             <span class="md-headline">{{oPada.title}}</span> <br>
             <span class="md-subhead">श्रेणी - {{oPada.category}}</span> <br>
             <span class="md-subhead">{{oPada.lyrics.length}} पंक्तियाँ</span>
         </md-card-title-text>

         <md-card-content>
                <p class="bandish">
                    <span class="author">
                        {{oPada.author ? data.padas[whichPada].author + " कौ 
                        पद" : ""}} 
                    </span>
                    <span class="raag">
                        {{oPada.raag ? ", राग-" + data.padas[whichPada].raag 
                            : 
                        ""}}
                    </span>
                    <span class="taal">
                        {{oPada.taal ? ", ताल-" + data.padas[whichPada].taal 
                            : 
                        ""}}
                    </span>
                    <span>
                        {{oPada.tune ? ", धुनि-" + data.padas[whichPada].tune 
                            : 
                        ""}}
                    </span>
                </p>

                <div class="padaBody">

            <p class="padaLyrics" ng-repeat="line in oPada.lyrics 
                    track by $index">
                        {{line}}
                    </p>

                    <p>
                        <span>{{oPada.note}}</span>
                    </p>

                </div>
         </md-card-content>
</md-content>

angular.module("customFilters", [])
// app
.filter("unique", function() {
    return function(data, propertyName) {
        if (angular.isArray(data) && angular.isString(propertyName)) {
            var results = [];
            var keys = {};
            for (var i = 0; i < data.length; i++) {
                var val = data[i][propertyName];
                if (angular.isUndefined(keys[val])) {
                    keys[val] = true;
                    results.push(val);
                }
            }
            return results;
        } else {
            return data;
        }
    }
})

App
.constant("padaUrl", "data/pada.json")
.controller("MainCtrl", function ($scope, $http, padaUrl) {

    // Data models
    $scope.data = {};

    // Read pada data
    $http.get(padaUrl)
        .then(function(response) {
            // Copy and remove first object
            $scope.data.pada0 = response.data.shift();
            // Copy pada.json array into model
            $scope.data.padas = response.data;
            $scope.numberOfPadas = $scope.data.padas.length - 1;
        },
        function(response) {
            $scope.data.error = response;
    });
});

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head></head>
<body ng-controller="MainCtrl">

   <div ng-cloak ng-show="data.error">
     Application data not loaded, <a ui-sref="index.html">click here to try again.</a>
   </div>

    <div ui-view ng-hide="data.error">
    </div>

</body>
</html>