javascript - ionic 将输入保存为变量

Question

我正在编写一个带有开放天气的天气应用程序，我想将城市(输入)保存为一个变量，以便在另一个 View 中调用它。所以我想输入 Vienna，将其发送到 result.html 并在那里发布当前天气并检查我应该穿什么衣服，例如如果温度低于 20°，应用程序应该提示我应该穿夹克。

这是我的 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>

这是我的 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();


});

最后是我的 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>

我知道我目前没有使用输入，因为我不知道如何在 js 中执行此操作。那么如何在 url 中然后在请求中调用我的输入呢？ 提前致谢!

Answer 1

尝试:

1. 将城市变量作为参数添加到您的州定义中:

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

2. 将变量传递给目标状态:

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

3. 注入(inject) $stateParams 服务并使用 Controller 中的变量:

   var city = $stateParams.city;
   

参见 https://github.com/angular-ui/ui-router/wiki/URL-Routing了解更多详情。

编辑

看看这个 plunker 演示我的更改:https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz

请注意，我将 saveText() 函数移动到 HomeCtrl 并从您的 home.html 中删除了 ng-controller 指令。