Ionic save input as variable

Question

I am coding a weather app with open weather and I would like to save the city (the input) as a variable to call it on another view. So I would like to type in Vienna, send it to result.html and post there the current weather and to check which clothes I should wear, e.g. if the emperature is under 20° the app should say that I should wear a jacket.

Here is my home.html:

    <ion-view title="" hide-nav-bar="true" hide-back-button="true">
  <ion-content>
    <div class="list card">
      <div class="item item-avatar">
         <img src="img/appicon.png">
         <h2>Weather App</h2>
         <p>What clothes do you need?</p>
      </div>

    </div>
    <div class="list">

  <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="City" ng-model="inputs.city">
    </label>
      <input class="button button-small" type="submit" ng-click="saveText(inputs)" value="Save" ng-controller="WeatherCtrl" />
  </div>

</div>

  </ion-content>
</ion-view>

Here my app.js:

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function ($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      controller: 'HomeCtrl',
      templateUrl: 'views/home.html'
    })
    .state('result', {
      url: '/result',
      controller: 'WeatherCtrl',
      templateUrl: 'views/result.html'
    });

  $urlRouterProvider.otherwise('/home');

})


.controller('HomeCtrl', function($scope) {
    $scope.forcastDisabled = true
})


.controller('WeatherCtrl', function ($scope, $http, $ionicLoading, $location) {
  var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];

  $scope.getIconUrl = function(iconId) {
      return 'http://openweathermap.org/img/w/' + iconId + '.png';
  };

   $scope.save = {};

  $ionicLoading.show();


  $scope.saveText = function (inputs) {
      alert('Geht');
      $location.path('result'); 
      $scope.save = angular.copy(inputs);
      $scope.inputs.city;

    }

  var vm = this;
  // Vienna
  var id = 2761369;
  var city = 'Vienna';
  var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city;

  var request = {
    method: 'GET',
    url: URL,
    params: {
       q: city,
      mode: 'json',
      units: 'imperial',
      cnt: '7',
      appid: '938c0cf5969f353bc718735f59aeffd6'
    }
  };

    $http(request)
    .then(function(response) {
      vm.data = response.data;
      $scope.weather = response.data;
    }).
    catch(function(response) {
      vm.data = response.data;
      $scope.weather = response.data;
    });

    $ionicLoading.hide();


});

And last my result.html:

<ion-view view-title="Current Weather">
  <ion-content>
    <div class="list card">
      <div class="item item-divider"><h1>City: {{weather.name}}</h1></div>
      <div class="item item-thumbnail-left">
        <img src="{{getIconUrl(weather.weather[0].icon)}}" />
        <h1>{{weather.weather[0].main}}</h1>
      </div>
      <div class="item item-icon-left">
        <i class="icon ion-thermometer"></i>
        <h2>Current Temperature: {{weather.main.temp}}&deg;</h2>
      </div>
      <div class="item item-icon-left">
        <i class="icon ion-thermometer"></i>
        <h2>Today's High: {{weather.main.temp_max}}&deg;</h2>
      </div>
      <div class="item item-icon-left">
        <i class="icon ion-thermometer"></i>
        <h2>Today's Low: {{weather.main.temp_min}}&deg;</h2>
      </div>
      <div class="item item-icon-left">
        <i class="icon ion-waterdrop"></i>
        <h2>Humidity: {{weather.main.humidity}}%</h2>
      </div>
      <div class="item item-icon-left">
        <i class="icon ion-shuffle"></i>
        <h2>Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}</h2>
      </div>
    </div>
  </ion-content>
</ion-view>

I know I am not currently using the input, because I do not know how to do this in js. So how can I call my input in the url and then in the request? Thanks in advance!

Answer 1

Try to:

1. Add the city variable as a parameter to your state definition:

   .state('result', {
     url: '/result',
     controller: 'WeatherCtrl',
     templateUrl: 'views/result.html',
     params: {
       city: null
     }
   })
   

2. Pass the variable to the target state:

   $state.go("result", {city: inputs.city});
   

3. Inject the $stateParams service and use the variable in the controller:

   var city = $stateParams.city;
   

See https://github.com/angular-ui/ui-router/wiki/URL-Routing for more details.

EDIT

Check out this plunker demonstrating my changes: https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz

Note that I moved the saveText() function to the HomeCtrl and removed the ng-controller directive from your home.html.