Question

我正在使用开放天气编写天气应用程序，我想将城市（输入）保存为变量，以便在另一个视图中调用它。所以我想输入维也纳，将其发送到result.html并在那里发布当前的天气并检查我应该穿哪些衣服，例如如果温度低于20°，app应该说我应该穿夹克。

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

尝试：

将城市变量作为参数添加到州定义中：

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

将变量传递到目标状态：

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

注入$ stateParams服务并使用控制器中的变量：
```
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指令。

离子保存输入为变量

1 个答案: