Issue
I have weird problem, I cant pass value of some params to other state in angular js.
I tried to assign value to params for search params before doing http request
.state('tab.box', {
url: '/search/box',
params: { term: {}, sortby: {}, cat: {}, loc: {}, land: {}, ftype:{}, sortbyc: {}, sortbyp :{}, ctype:{} },
views: {
'tab-search': {
templateUrl: 'templates/search-box.html',
controller: 'BoxCtrl'
}
}
})
I want to pass some values using the params to this state. Here is the controller
$scope.apply = function(index) {
var listCat = $scope.checkedCat.join();
console.log($scope.filter.filterftype)
console.log($scope);
$ionicHistory.currentView($ionicHistory.backView());
$state.go('tab.box', { term: $stateParams.term, sortby: $scope.filterSortBy, cat : listCat, loc: $stateParams.loc, land: $stateParams.land, ftype:$scope.filter.filterftype, sortbyc:$scope.filterSortByc, sortbyp:$scope.filterSortByp, ctype:$scope.filterctype}, { location: 'replace' });
};
$scope.setBoxTypeActiveButton = function(click, index)
{
if(click == true){
angular.forEach($scope.boxtypes, function(value, key) {
if(key == index)
{
$scope.boxtypes[key].click = true;
$scope.filter.filterftype = $scope.boxtypes[key].id;
}else{
$scope.boxtypes[key].click = false;
}
});
}else{
$scope.boxtypes[index].click = false;
$scope.filter.filterftype = '';
}
}
This line $scope.filter.filterftype = $scope.boxtypes[key].id
is where I assign the id value to $scope
After I hit apply button which run apply() function somehow ftype:$scope.filter.filterftype
parameter doesnt get assigned.
When I console.log($stateParams)
at next state (tab.box), it contains empty object.
The weird part is with very similar code, the other params are working fine.
This is the result of Console.log($scope.filter.filterftype)
id 12 is the id before changing state, and the results of console.log($stateParams)
after state changed
12 BoxCtrl.js:10
{term: {…}, sortby: {…}, cat: {…}, loc: {…}, land: {…}, …}
cat:""
ctype:"no"
ftype:""
land:""
loc:""
sortby:"no"
sortbyc:"no"
sortbyp:"no"
term:""
__proto__:Object
If I do this ftype:"5"
not using $scope variable, its working.
My view :
<ion-view view-title="Filter" cache-view="false">
<ion-nav-buttons side="right">
<button class="button" ng-click="apply()">
<i class="icon ion-android-done"></i>
</button>
</ion-nav-buttons>
<ion-content class="padding">
<h4 style="margin-top:5px; margin-bottom:5px;">Type</h4>
<button ng-repeat="box in boxes" class="button button-small button-stable" ng-model="boxes.click" ng-class="box.click== true?'button-on':'button-light'" ng-click="box.click=!box.click; setBoxActiveButton(box.click, $index);" style="margin:2px"> {{box.text}}</button>
<button class="button button-full button-positive" ng-click="apply()">Apply</button>
</ion-content>
</ion-view>
Any idea whats wrong here?
Solution
First thing better to change all the param objects to string instead of objects.
.state('tab.box', {
params: { term: '', sortby: '', cat: '', loc: '', land: '', ftype: '', sortbyc: '', sortbyp: '', ctype: '' },
views: {
'tab-search': {
templateUrl: 'templates/search-box.html',
controller: 'BoxCtrl'
}
}
})
Secondly, you have to send string as a parameter instead of number.
$scope.apply = function(index) {
var listCat = $scope.checkedCat.join();
$ionicHistory.currentView($ionicHistory.backView());
$state.go('tab.box', { term: $stateParams.term, sortby: $scope.filterSortBy, cat : listCat, loc: $stateParams.loc, land: $stateParams.land, ftype:$scope.filter.filterftype.toString(), sortbyc:$scope.filterSortByc, sortbyp:$scope.filterSortByp, ctype:$scope.filterctype}, { location: 'replace' });
};
Answered By – Sravan
Answer Checked By – Pedro (AngularFixing Volunteer)