I want to access filtered array of objects shown on current page on next page on selection of an item on current page.
app.js
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'
})
});
Controllers.js
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);
};
});
List.html
<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>
Deatails.html
<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>
filters.js
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;
}
}
})
MainController.js
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;
});
});
index.html
<!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>
Say, I got filtered array of objects for "cat3" on Web Page 1 as as list of links. When I select a link from filtered list, I show details of selected item on Web Page 2. I want to iterate details of each item of filtered array of objects one by one using previous and next buttons or left right swiping gestures.
