Pass parameters by clicking button to other controller

Question

i got to do a simple CityBike Application for a class at university. To complete the task, i give the user the possibility to choose between three cities and showing all the free bikes and empty city bike spots at the moment, going forward. Through the service.js I include the api for the citybikes.

I now got two views (start.html & citybikes.html) and i would like to choose one of the three cities in the Dropdown menu and pass it to citybikes.html-controller by clicking on the button. Is there any simple way to accomplish that?

Here's the main part of the code for the start.html:

<label class="item item-input item-select">
  <div class="input-label">
    Stadt auswählen
  </div>


  <select ng-model="choose.name">
    <option ng-repeat= "city in citystart"> {{city.CityName}}</option>
  </select>
</label>

<p> anzeige? {{choose.name}}</p>


<!--BUTTON-->
<a ng-if="choose.name"
  class="button button-block button-positive"
  ui-sref="tab.citybike({param1: choose.name})">
  CityBikes anzeigen
</a>

And here are the controller:

    angular.module('starter.controllers', [])
.controller('Start', function($scope, $stateParams, cities_overview) {
  //$scope.citystart = cities_overview.getCities();
})


.controller('CityBikeController', function($scope, $stateParams, CityBikeParis, CityBikeHamburg, CityBikeLondon, cities_overview, chosencities) {
  $scope.chosenVar = "";
  $scope.chosenVar = $stateParams.param1;
  $scope.SumFree=0;
  $scope.SumEmpty=0;

  var liste = CityBikeHamburg.getList();


  switch($scope.chosenVar){
      case "Paris":
        liste = CityBikeParis.getList();
      break;

      case "Hamburg":
        liste = CityBikeHamburg.getList();
      break;

      case "London":
        liste = CityBikeLondon.getList();
      break;
        }

    liste.then(function(list) {
        $scope.stationlist = list.data.network.stations;
        for(var i=0; i<$scope.stationlist.length; i++){
          $scope.SumFree   += $scope.stationlist[i].free_bikes;
          $scope.SumEmpty  += $scope.stationlist[i].empty_slots;
        }
    })

})

Finally an excerpt of my app.js that routes the views:

  .state('tab.citybike', {
      url: '/citybike',
      parameter: {
        'param1':""
       },
      views: {
        'tab-citybike': {
          templateUrl: 'templates/citybike.html',
          controller: 'CityBikeController'
        }
      }
    });

I would be very very grateful if anyone could help me out! :)

Greets, Thomas

consider creating `components` and communicate between them using `bindings` — andreim, Apr 28 '17 at 14:59
See http://stackoverflow.com/questions/25647454/how-to-pass-parameters-using-ui-sref-in-ui-router-to-controller — searlea, Apr 28 '17 at 16:22
Thanks a lot! Worked fine for me - but is there any way to convert it automatically to a string? Something went wrong at that phase, i think. — Thomas Gebetsberger, Apr 28 '17 at 17:20

score 0 · Accepted Answer · answered Apr 29 '17 at 20:44

You can pass parameter in state param.

Routing :

  $stateProvider
  .state('tab.citybike', {
    url: '/citybike/:param1',
    views: {
      'tab-citybike': {
        templateUrl: 'templates/citybike.html',
        controller: 'CityBikeController'
      }
    },
    ...
  }

Controller :

var param = $stateParams.param1; //get param1 value.

Html :

ui-sref="tab.citybike({param1: choose.name})"

Pass parameters by clicking button to other controller

1 Answers1