some params dont pass value when changing state angularjs

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)