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}}°</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>
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!
Try to:
Add the city variable as a parameter to your state definition:
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html',
params: {
city: null
}
})
Pass the variable to the target state:
$state.go("result", {city: inputs.city});
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.
Related
Any one can refer me a link or a demo of code for developing a popup using angularjs.
I have tried the following code but it's not working.
var myApp = angular.module('myApp', ['ngRoute', 'ngMap', 'ui.bootstrap']);
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "views/home.php",
controller: 'PopupDemoCont'
})
.when("/profile.php", {
templateUrl: "views/profile.php"
})
.otherwise({
redirectTo: "/"
});
});
myApp.controller("ImageController", ["$scope", function($scope) {
$scope.logoimage = "images/logo.png";
$scope.bgtextimage = "images/bgtextimage.png";
}]);
myApp.controller("PopupDemoCont", ["$scope", "$modal", function($scope, $modal) {
$scope.open = function() {
console.log('opening pop up');
var modalInstance = $modal.open({
templateUrl: 'views/popup.php',
controller: 'PopupCont'
});
};
}]);
myApp.controller("PopupCont", ["$scope", "$modalInstance", function($scope, $modalInstance) {
$scope.close = function() {
$modalInstance.dismiss('cancel');
};
}]);
In bellow html, I set ng-controller but it isn't working.
<div class="book_div">
<div class="book_content">
<p id="book-text">Facing Immigration
<br> Problems?
</p>
<p>Helpful Guid To Navigate Your Case</p>
<div class="hidden-sm hidden-xs"><img ng-src="{}" class="center-block img-responsive">
</div>
<a class="submit-button book_btn" ng-click="open()">Free download</a>
</div>
</div>
It is giving the Error:
[$injector:unpr].
You can use uibModalinstance.
On button click call the function open.
code for open function:
$scope.open = function(uuid,name){
var instance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'common/common/partials/delete-
confirm.tpl.html',
controller: function ($uibModalInstance,
$scope) {
$scope.name = Name;
$scope.icon = "fa-cogs";
$scope.description = "Yo have opened uib
Popup"
$scope.delete = function () {
$uibModalInstance.close($scope.deleteValue);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
}
I have used this code for deleting my record. You can use in your way, if you want to take response of Popup you can use:
instance.result.then(function (option) {
// Your code here
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
HTML template will be like:
<div class="modal-header gray_background">
<h4><b>Permanently Delete - <i class="fa {{icon}} folderIcon" aria-hidden="true"></i> {{name}} </b></h4>
</div>
<div class="modal-body">
<span data-ng-bind-html="description"></span>
<center style="margin-top: 10px;">
<div>Type "delete" to confirm
<input type="text" class="input" ng-model="deleteValue" required />
</div>
</center>
</div>
<div class="modal-footer gray_background">
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
<button class="btn btn-danger" type="button" ng-click="delete()">Delete</button>
</div>
Hope this would be helpful, if you have any further query you can ask.
Thanks!
My back button is sending me to the first page/state of my app (cadastreSe). How can I force it to go back to previous page/state ('menu.temporada2016') with my button id="temporada2016-button3" active. Is it possible with angularjs?
I hat to enable it with $scope.$on('$ionicView.beforeEnter'...
states:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu.temporada2016', {
cache: false,
url: '/page1',
views: {
'side-menu21': {
templateUrl: 'templates/temporada2016.html',
controller: 'temporada2016Ctrl',
params: { dataToTemp: false }
}
}
})
.state('menu.fotos', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'templates/fotos.html',
controller: 'fotosCtrl'
}
}
})
.state('menu.configuraEs', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'templates/configuraEs.html',
controller: 'configuraEsCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('detalhes', {
cache: false,
url: '/page4',
params: {
dataToDetails: false
},
templateUrl: 'templates/detalhes.html',
controller: 'detalhesCtrl'
})
.state('cadastreSe', {
url: '/page5',
templateUrl: 'templates/cadastreSe.html',
controller: 'cadastreSeCtrl'
})
.state('home', {
url: '/page6',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('suporte', {
url: '/page7',
templateUrl: 'templates/suporte.html',
controller: 'suporteCtrl'
})
.state('fotos2', {
url: '/page8',
templateUrl: 'templates/fotos2.html',
controller: 'fotos2Ctrl',
params: {
dataToFotos: false
}
})
$urlRouterProvider.otherwise('/page5')
});
controller:
.controller('fotos2Ctrl', ['$scope', '$state', '$ionicModal', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', function ($scope, $state, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
$scope.$on('$ionicView.beforeEnter', function(event, viewData){
viewData.enableBack = true;
});
$scope.$on('$routeChangeSuccess', function(event, current, previous){
});
if(!$state.params.dataToFotos) {
console.log($state.params.dataToFotos);
}else{
console.log($state.params.dataToFotos);
$scope.images = $state.params.dataToFotos.album;
}
$scope.zoomMin = 1;
// image gallery
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/popover.html');
}
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
}
// Close the modal
$scope.closeModal = function() {
$scope.modal.hide();
$scope.modal.remove()
};
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$ionicSlideBoxDelegate.enableSlide(true);
} else {
$ionicSlideBoxDelegate.enableSlide(false);
}
};
}])
fotos2.html
<ion-view title="Fotos ..." id="page8" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<!--<div class="row responsive-md">
<div class="col col-25" ng-repeat="image in images">
<img ng-src="http://localhost/dashboard/{{image.FILE}}" width="100%" />
</div>
</div>-->
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 2].FILE}}" width="100%" ng-click="showImages($index+2)" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 3].FILE}}" width="100%" ng-click="showImages($index+3)" />
</div>
</div>
</ion-content>
</ion-view>
temporada2016.html
<ion-view title="Temporada 2016" id="page1" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<div id="temporada2016-button-bar1" class="button-bar">
<button id="temporada2016-button2" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_news_btn: active_news_btn}" ng-click="activate_news()">Notícias</button>
<button id="temporada2016-button3" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_albums_btn: active_albums_btn}" ng-click="activate_albums()">Fotos</button>
</div>
<form id="temporada2016-form8" class="list" ng-show="search_news">
<label class="item item-input" name="search_news">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Pesquisar Notícia" ng-model="searchNews">
</label>
</form>
<div class="item item-body list-container" id="temporada2016-list-item-container4" ng-model="item_id" ng-repeat="x in items | filter:searchNews" item="x" href="#/x/{{x.ID}}" ng-click="open_item(x)" ng-show="news_list">
<div id="temporada2016-markdown7" style="margin-top:0px;color:#666666;">
<h2 style="color:#008BBB;">{{ x.TITLE }}</h2>
</div>
</div>
<!--<ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
<ion-item class="item widget uib_w_2" data-uib="ionic/list_item" data-ver="0" ng-repeat="x in items">{{ x.TITLE }}</ion-item>
</ion-list>-->
<ion-list id="fotos-list4" ng-show="albums_list">
<ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
<i class="icon ion-images"></i>
{{item.FOLDER}}
<i class="icon ion-ios-arrow-forward"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
index.html
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
You can overwrite the header of the specific page by adding a new one to the template of the specific view. it should be even outside and above of the tag. simply have it mirror your normal header. then implement a back-button which looks the exact same, but have it trigger an ng-click event which you can then use to route the user to that specific view you want him to go back to, either by using $state.go() or by using the $ionicHistory dependancy to navigate back through the navigation stack.
My app uses tabs, a side menu, and the master details pattern. But, for some reason, when I try to navigate to the details page of an item in the list, nothing comes up. I'm not sure if I have the routing wrong or something.
If someone could help me out, I would really appreciate it! This is driving me crazy!
Thanks!
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('event-detail', {
url: '/event-detail/:name',
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
})
tab-feed.html
<ion-view view-title="Feed" class="tab-feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/event-detail/{{event.name}}">
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
EventDetailsController
.controller('EventDetailCtrl', ['getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var name = $stateParams.name;
$scope.event = getLocalStorage.getEvent(name);
}])
getLocalStorage Service
.factory('getLocalStorage', function () {
var eventList = [];
return {
list: eventList,
updateEvents: function (eventsArr) {
if (window.localStorage && eventsArr) {
localStorage.setItem("events", angular.toJson(eventsArr));
}
//update the cached version
eventList = eventsArr;
},
getEvents: function () {
eventList = angular.fromJson( localStorage.getItem("events") );
return eventList ? eventList : [];
},
getEvent: function(name){
for(i=0;i<eventList.length;i++){
if(eventList[i].name == name){
return eventList[i];
}
}
}
};
})
Can you try the following:
1) Add abstract: true to your tabs state:
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
abstract: true,
templateUrl: 'templates/tabs.html'
})
2) In your EventDetailsCtrl, if you're thinking of minification, add all your injection parameters, in order, before function... like this:
.controller('EventDetailCtrl', ['$scope', 'getLocalStorage', '$stateParams', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
If the above doesn't help, please post your tabs.html code.
My app uses tabs, a side menu and a master detail pattern. But, for some reason, I can't figure out how to make it navigate to the detail page of an item in the list. I've been trying to figure it out for days but I'm pretty new to Ionic and Angular...
If anybody could tell me what's wrong, I would really appreciate it.
tab-feed.html
<ion-view view-title="Feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.name}}">
<!-- <ion-item class="item item-thumbnail-left" ng-repeat="event in events" type="item-text-wrap" ui-sref="event({eventId:event.id})">-->
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
tabs.html
<ion-view view-title="Tabs">
<ion-tabs class="tabs-icon-top tabs-positive">
<!-- Feed Tab -->
<!-- <ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="app.tabs.feed">-->
<ion-tab title="The Feed" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('tabs.event-detail', {
url: '/feed/:eventId',
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
...
$urlRouterProvider.otherwise('/tab');
});
controllers.js
.controller('FeedCtrl', ['$scope', 'getLocalStorage', '$ionicModal', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $ionicModal, $ionicSideMenuDelegate) {
$scope.info = {};
$scope.events = getLocalStorage.getEvents();
$scope.clearSelected = function() {
$scope.events = $scope.events.filter(function(item) {
return !item.selected;
});
getLocalStorage.updateEvents($scope.events);
};
$scope.addEvent = function() {
$scope.events.push($scope.info);
$scope.modal.hide();
getLocalStorage.updateEvents($scope.events);
$scope.info = {};
};
$ionicModal.fromTemplateUrl('new-event.html', function(modal) {
$scope.modal = modal;
}, {
scope: $scope,
animation: 'slide-in-up',
focusFirstInput: true
});
}])
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.name;
$scope.event = getLocalStorage.getEvent(eventId);
})
Your name of parameter in the URL doesn't match the requested parameter in the controller and the link in tab-feed.html.
app.js
.state('tabs.event-detail', {
url: '/feed/:eventId', // <-- The parameter is defined as eventId
views: {
'tab-event-detail': {
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
}
}
})
controller.js
.controller('EventDetailCtrl','getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var eventId = $stateParams.eventId; // <-- here you request the parameter
$scope.event = getLocalStorage.getEvent(eventId);
})
And last you also need to correct the href-attribute in
tab-feed.html
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/feed/{{event.eventId}}">
Of course, you also can use the name as parameter, but you have to be consistent.
I have this html
<body ng-controller="AppCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view animation="slide-left-right" name="main-view">
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<div class="list">
<a menu-close href="#" class="item item-icon-left">
<i class="icon ion-home">
</i>
Home
</a>
<a menu-close href="#/product" class="item item-icon-left">
<i class="icon ion-home">
</i>
products
</a>
<a menu-close href="#/category" class="item item-icon-left">
<i class="icon ion-home">
</i>
Category
</a>
</div>
</ion-side-menu>
</ion-side-menus>
<script id="product.html" type="text/ng-template">
<ion-view title="products">
<ion-content>
<div class="list">
<a class="item" href="#/product-form?id={{item.id}}" ng-repeat="item in items | filter:{nome: searchText}">
{
{item.nome}
}
<span class="item-note">
{
{item.quantidade}
}
</span>
</a>
</div>
</ion-content>
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#/product-form">
<i class="icon ion-home"></i>
Adicionar
</a>
<a class="tab-item" ng-click="openModal()">
<i class="icon ion-search"></i>
Filtrar
</a>
</div>
</ion-view>
</div>
</script>
<script id="search.html" type="text/ng-template">
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="busca" ng-model="searchText">
</label>
<button class="button button-clear" ng-click="closeModal()">
cancelar
</button>
</div>
</script>
</body>
And with this controller
angular.module('ionicApp.controllers', ['ionicApp.config', 'xc.indexedDB'])
.controller('ProductController',
function ($scope, $ionicPopup, $timeout,
$ionicModal, $indexedDB, $window, $ionicModal) {
$scope.safeApply = function (fn) {
var phase = this.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if (fn && (typeof (fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
var OBJECT_STORE_NAME = constants.productStore;
$scope.items = [];
$scope.searchText = "";
$scope.getAll = function () {
var myObjectStore = $indexedDB.objectStore(OBJECT_STORE_NAME);
myObjectStore.getAll().then(function (results) {
// Update scope
$scope.safeApply(function () {
$scope.items = results;
});
});
};
$scope.getAll();
$ionicModal.fromTemplateUrl('search.html', {
scope: $scope,
animation: 'slide-left-right'
}).then(function (modal) {
$scope.modal = modal;
});
$scope.closeModal = function () {
alert($scope.searchText);
$scope.modal.hide();
};
$scope.openModal = function () {
//$scope.searchText = "a";
$scope.getAll();
$scope.modal.show();
};
$scope.closeModal = function () {
alert($scope.searchText);
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function () {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function () {
// Execute action
});
})
Edit
Here is where i define the ProductController
var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: "/",
views: {
'main-view': {
templateUrl: "home.html",
controller: "AppCtrl"
}
}
})
.state('product', {
url: "/product",
views: {
'main-view': {
templateUrl: "product.html",
controller: 'ProductController'
}
}
});
$urlRouterProvider.otherwise("/");
});
My problem is the searchText model isn't updating when the value changes. I tried $watch, ng-options.
I can put a initial value to the $scope.searchText on openModal method, but after inputed values don't update the model value, because of this my list isn't filtered.
Anyone could help me?
Thanks.
Edit 2
I solved the problem adding the search text into the modal.
$scope.modal = modal;
$scope.modal.searchText = "";
And i changed the attribute to the new variable.
<input type="search" placeholder="busca" ng-model="modal.searchText">
Thanks for the support.
Two-way binding works best with a nested object. Change your bindings to use something like this
$scope.data = {};
$scope.data.items = [];
The template for the modal is still being requested before the modal is in scope. That's probably the reason