离子将输入保存为变量
Ionic save input as variable
我正在编写一个具有开放天气的天气应用程序,我想将城市(输入)保存为变量以在另一个视图上调用它。所以我想输入维也纳,把它发送到result.html
并在那里发布当前的天气,并检查我应该穿哪些衣服,例如,如果温度低于20°,应用程序应该说我应该穿夹克。
这是我的家.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>
这是我的应用程序.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();
});
最后我的结果.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}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's High: {{weather.main.temp_max}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's Low: {{weather.main.temp_min}}°</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 中调用我的输入,然后在请求中调用我的输入呢?提前感谢!
尝试:
-
将城市变量作为参数添加到状态定义中:
.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
,并从您的家中删除了ng-controller
指令.html。
相关文章:
- 将JavaScript变量保存到Rails模型
- 将javascript变量保存到数据库中
- 将Javascript从PHP变量保存到文件
- 跨站点脚本过滤器阻止了我使用python-cgi脚本将javascript变量保存到mysqldb的尝试
- 需要将一个值从javascript变量保存到php会话
- Angular ui路由器,通过url/url变量保存状态
- 是否将Javascript变量保存为PHP变量?获取、发布、COOKIE
- 尝试将 PHP $_POST 变量保存到 javascript 中,但它不起作用
- 将 PHP 变量保存到函数中的脚本变量
- 如何让变量保存 mongodb 数据库
- 角度将变量保存到带有 ajax 调用的 laravel 会话不起作用
- 无法将变量保存到本地存储中
- 将 javascript 变量保存到 Ruby 中
- 如何在Symfony中将javascript变量保存到我的表单类型中
- 从javascript变量保存图像
- Backbone.js没有't将变量保存在集合中
- 将js函数中的一个变量保存到代码后面的server/#C中
- AngularJS是否将变量保存到文件中
- SAPUI5 jQuery.sap.storage变量保存
- 如何将Jmeter变量保存到csv文件