I have the following scenario:
I would like to filter a list and this list is in a different ion-content because i want the search bar to be fixed.
Now the ng.model from the input isn't accessable in the other ion-content. What can I do?
This is my code:
<ion-view>
<ion-content class="no-bgColor" scroll="false" padding="false">
<label class="item item-input">
<span class="input-label">Suche</span>
<input type="text" ng-model="searchBox.storeName">
</label>
</ion-content>
<ion-content class="has-header">
<div class="card-elem animated zoomIn" ng-repeat="cat in myData | filter:searchBox track by cat.storeName">
<h1>{{cat.storeName}}</h1>
<p ng-if="d == 1">Heute: {{cat.openingHours[0]}}</p>
<p ng-if="d == 2">Heute: {{cat.openingHours[1]}}</p>
<p ng-if="d == 3">Heute: {{cat.openingHours[2]}}</p>
<p ng-if="d == 4">Heute: {{cat.openingHours[3]}}</p>
<p ng-if="d == 5">Heute: {{cat.openingHours[4]}}</p>
<p ng-if="d == 6">Heute: {{cat.openingHours[5]}}</p>
<p ng-if="d == 0">Heute: {{cat.openingHours[6]}}</p>
<br>
<h2 ng-click="showAlert(cat.openingHours[0],cat.openingHours[1],cat.openingHours[2],cat.openingHours[3],cat.openingHours[4],cat.openingHours[5],cat.openingHours[6])">Alle Öffnungszeiten</h2>
</div>
</ion-content>
<a href="#home"><div class="bar bar-footer bar-balanced">
<div class="title">Zurück</div>
</div></a>
</ion-view>
just initialize this $scope.searchBox = { storeName: '' }; or $scope.searchBox = { }; in your controller
working example
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
//initialize with a empty value
$scope.searchBox = { };
$scope.stooges = [{
name: 'Moe'
}, {
name: 'Larry'
}, {
name: 'Curly'
}];
});
.bg-smoke,
.bg-smoke label {
background-color: #fafafa;
}
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp">
<div ng-controller="AppCtrl">
<ion-view title="Home">
<ion-header-bar class="bar-stable">
<h1 class="title">Search By Name</h1>
</ion-header-bar>
<ion-content class="bg-smoke" scroll="false" padding="false">
<label class="item item-input">
<span class="input-label">Search</span>
<input type="text" ng-model="searchBox.name">
</label>
</ion-content>
<ion-content class="has-header has-subheader">
<ion-list>
<ion-item ng-repeat="stooge in stooges | filter:searchBox track by stooge.name" href="#">{{stooge.name}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
</div>
</div>
Related
I want to show an alert whenever the toggle is on and off but finding it difficult.
I followed this tutorial but mine is not working as it should
http://codepen.io/rossmartin/pen/iwuvC
JS
.controller('shops',['$scope','$http','$timeout',function($scope,$http,$timeout){
$http.get('http://localhost/site/templates/shop.php').success(function(data){
$scope.shops=data ;
$scope.pushNotificationChange = function() {
$timeout(function() {
alert('Push Notification Change: '+ $scope.pushNotification.checked);
}, 0);
};
$scope.pushNotification = { checked: true };
});
}])
HTML
<ion-view align-title="center">
<ion-content overflow-scroll="false" has-bouncing="true" class=padding>
<ion-list>
<div ng-controller="shops" ng-repeat="item in shops">
<ion-item class="item-thumbnail-left item-text-wrap">
<img src="img/index/fashion.png" alt="photo" width="32" height="32" />
<h2>{{item.shop_name}} </h2>
<p>{{item.biz_location}}</p>
<div align="right">
<label class="toggle toggle-balanced">
<input type="checkbox"ng-model="pushNotification.checked"
ng-change="pushNotificationChange()">
<div class="track"><div class="handle"></div></div>
</label>
</div>
</ion-item>
</div>
</ion-list>
</ion-content overflow-scroll="false" has-bouncing="true">
</ion-view>
any help on how to make this work?
Your code is all inside http, it should be outside:
.controller('shops',['$scope','$http','$timeout',function($scope,$http,$timeout){
$http.get('http://localhost/site/templates/shop.php').success(function(data){
$scope.shops=data;
});
$scope.pushNotificationChange = function() {
$timeout(function() {
alert('Push Notification Change: '+ $scope.pushNotification.checked);
}, 0);
};
$scope.pushNotification = { checked: true };
}])
try this
<ion-view align-title="center">
<ion-content overflow-scroll="false" has-bouncing="true" class=padding>
<ion-list>
<div ng-controller="shops">
<div ng-repeat="item in shops">
<ion-item class="item-thumbnail-left item-text-wrap">
<img src="img/index/fashion.png" alt="photo" width="32" height="32" />
<h2>{{item.shop_name}} </h2>
<p>{{item.biz_location}}</p>
<div align="right">
<label class="toggle toggle-balanced">
<input type="checkbox"ng-model="pushNotification.checked"
ng-change="pushNotificationChange()">
<div class="track"><div class="handle"></div></div>
</label>
</div>
</ion-item>
</div>
</div>
</ion-list>
</ion-content overflow-scroll="false" has-bouncing="true">
</ion-view>
Here is my simple code for a demo Ionic Application.
<body ng-app="starter" ng-controller="catego">
<ion-pane >
<ion-header-bar class="bar bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Hardware Shop</h1>
<button class="button button-clear icon ion-plus-circled" ng-click="popover.show($event)"></button>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem"/>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</label>
</div>
<ion-content class="has-subheader" style="padding:5px !important;">
<ion-refresher pulling-text="Refreshing..." on-refresh="dorefresh()"></ion-refresher>
<div class="list" >
<div ng-repeat="element in data | filter : searchitem| orderBy : 'category'">
<div class="item item-divider">{{ element.category }}</div>
<ion-list can-swipe="true">
<ion-item class="" href="#" ng-repeat="innerelement in element.companies | filter : searchitem | orderBy : 'toString()' track by $index">
--- {{innerelement}} <br/>
<ion-option-button class="button-positive icon ion-edit"></ion-option-button>
</ion-item>
</ion-list>
</div>
</div>
</ion-content>
</ion-pane>
</body>
The button in my subheader which says NOTWORKING is not working. I have made sure that there are no errors in the console and all other methods are working fine. Is there something I am missing?
Any help is highly appreciated.
You have to move the <button> outside the <label> as in the code below:
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="text" placeholder="Search item" ng-model="searchitem" />
</label>
<button class="button button-clear" ng-click="clear()">NOTWORKING</button>
</div>
I found better this, This is working fine on my app, Nice gesture on Ios Also
$scope.$on('$stateChangeSuccess', function() {
$('*[ng-click]').each(function() {
$(this).attr("ng-click");
$(this).attr("on-touch", $(this).attr("ng-click"));
});
});
I'm working on saving, retrieving, editing data using SQLite / ionic / Angularjs.
I saved and retrieved the data successfully. And i'm left with an edit page.
I linked href from display page to an edit page with the hope of populating the edit page with data from the display page, but the binding is not working.
Thanks for your kind assistance:
Display view:
<ion-view view-title="List">
<ion-content class="padding" ng-controller="TeamCtrl">
<div class="list list-inset">
<div class="item item-divider item-royal">
PERSONAL DETAILS
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">First Name :
<input type="text" ng-model="data.name" required>
</label>
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">ID :
<input type="number" ng-model="data.id" required>
</label>
</div>
<div class="padding">
<div class="list">
<a class="item" ng-repeat="task in Ourdata" href="#/edit/{{task.id}}">
<h2>{{task.id}}</h2>
<p>{{task.name}}</p>
</a>
</div>
</div>
<div class="padding">
<button class="button button-full button-positive" ng-click="createNewTeamMember(data)">
Save
</button>
</div>
<div class="padding">
<button class="button button-full button-positive" ng-click="DisplayMember(data)">
Display
</button>
</div>
</div>
</ion-content>
</ion-view>
The Edit View:
<ion-view view-title="Edit">
<ion-content ng-controller="TeamCtrl">
<div class="list list-inset">
<div class="item item-divider item-royal">
PERSONAL DETAILS
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">First Name :
<input type="text" ng-model="task.name" required>
</label>
</div>
<div class="item item-input-inset">
<label class="item item-input item-input-wrapper">ID :
<input type="number" ng-model="task.id" required>
</label>
</div>
</div>
<!--<div class="padding">
<button class="button button-full button-positive" ng-click="DisplaySingleMember(RegId)">
Display
</button>
</div>-->
</div>
</ion-content>
</ion-view>
The Controller:
.controller('TeamCtrl', function($scope, Team, $state) {
$scope.team = [];
$scope.team = null;
$scope.RegId = $state.params.RegId;
$scope.updateTeam = function() {
Team.all().then(function(team){
$scope.team = team;
});
}
$scope.updateTeam();
$scope.createNewTeamMember = function(member) {
console.log("hello");
Team.add(member);
$scope.updateTeam();
};
$scope.removeMember = function(member) {
Team.remove(member);
$scope.updateTeam();
};
$scope.editMember = function(origMember, editMember) {
Team.update(origMember, editMember);
$scope.updateTeam();
};
$scope.DisplayMember = function(member) {
Team.all(member).then(function(data){ $scope.Ourdata= data;console.log($scope.Ourdata);});
};
$scope.DisplaySingleMember = function(RegId) {
Team.get(RegId).then(function(data){ $scope.task= data;console.log($scope.task);});
};
})
When I click my newly created items in my list, once clicked, I want them to display on h1 the name of what's been added to my list. I'm not sure what's wrong, I thought I had followed this example pretty closely but I am not sure what is wrong or why it isn't being recognized when I call {{item}} in my templates/item.html script.
http://codepen.io/gnomeontherun/pen/EfKgJ
index.html
<ion-nav-bar class="bar-dark">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<!--NAV BAR CONTROLLER-->
<ion-view view-title="Home">
<div ng-controller="AppCtrl">
<ion-side-menus>
<!--TOP NAV BAR-->
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-icon button-clear">
<span class="icon ion-ios-arrow-left"></span>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-plus-round" ng-click="modal.show()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-content class="has-header">
</ion-nav-bar>
<ion-side-menu-content>
<br>
<br>
<ion-list>
<ion-item ng-repeat="contact in contacts" href="#/item">{{contact.name}}</ion-item>
</ion-list>
<!--TOP NAV BAR END-->
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<!--SIDE MENU CONTENT-->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark">
</ion-header-bar>
<ion-content>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-ios-search"></i>
Search
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Inbox
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-eye"></i>
Watching
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Sellers
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-ios-cart"></i>
Cart
<span class="badge badge-assertive">0</span>
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#/sign-in">
<i class="icon ion-log-out"></i>
Logout
</a>
</ion-list>
</ion-content>
</ion-side-menu>
<!--END OF SIDE MENU CONTENT-->
</ion-side-menus>
</div>
</ion-view>
</script>
<script id="templates/home.html" type="text/ng-template">
<!--HOME PAGE-->
<ion-view view-title="Home">
</ion-view>
</script>
<script id="templates/modal.html" type="text/ng-template">
<!--ADD LISTING CONTROLLER-->
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">For Sale</h1>
<button class="button button-clear ion-close-round" ng-click="modal.hide()"></button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Designer</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Product</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-assertive" ng-click="createContact(newUser)">Create Listing</button>
</div>
</ion-content>
</ion-modal-view>
</script>
<script id="templates/item.html" type="text/ng-template">
<ion-view title="Listing">
<ion-content>
<h1>
{{item}}
CONTACT.NAME SUPPOSED TO BE HERE
</h1>
</ion-content>
</ion-view>
</script>
app.js
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('forgotpassword', {
url: '/forgot-password',
templateUrl: 'templates/forgot-password.html'
})
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('item', {
url: '/item',
controller: 'ItemCtrl',
templateUrl: 'templates/item.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
templateUrl: 'templates/home.html',
controller: 'HomeTabCtrl'
}
}
});
$urlRouterProvider.otherwise('/sign-in');
})
.controller('SignInCtrl', function($scope, $state) {
"use strict";
$scope.signIn = function(user) {
console.log('Sign-In', user);
$state.go('tabs.home');
};
})
.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate) {
"use strict";
console.log('HomeTabCtrl');
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('AppCtrl', function($scope, $ionicModal) {
"use strict";
$scope.contacts = [
{ name: 'Mike Freeman' },
{ name: 'Barney Calhoun' },
{ name: 'Lamarr the Headcrab' },
];
$ionicModal.fromTemplateUrl('templates/modal.html', {
animation: 'slide-in-up',
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function () {
$scope.modal.show();
};
$scope.form = {};
$scope.createContact = function(u) {
$scope.contacts.push({ name: u.firstName + ': ' + u.lastName + ' $' + u.email });
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
.controller('ItemCtrl', function($scope, $stateParams) {
"use strict";
$scope.item = $stateParams.item;
});
Having trouble trying to get my app to switch to another page on a click in my controller. If anyone could give me pointer on what I'm missing or doing wrong here it would really be appreciated!
here is my app.js
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
views: {
'login': {
templateUrl : 'index.html',
controller: 'TestCrtl'
}
}
})
.state('userprofile', {
url: '/mainmenu',
templateUrl: 'views/main-menu/main-menu.html'
})
$urlRouterProvider.otherwise('/');
})
.controller('TestCtrl',function($scope, $location) {
$scope.testMove = function($scope, $location) {
console.log("Button was pressed!");
$location.transitionTo('/mainmenu');
}
});
and here is my index.html
<body ng-app="app" animation="slide-left-right-ios7">
<ion-view style="" title="MainMenu">
<div class="bar bar-header bar-assertive">
<h1 class="title">Home</h1>
<a class="button icon-right button-clear ion-gear-a"></a>
</div>
<ion-content style="background-color: #e9efec" class="has-header" scroll="true" padding="true">
<div align="center" style="padding: 15%">
<img style="height: 60px; width: 180px" src="img/digicellogo.png">
</div>
<div style="" class="list card">
<div class="item item-body">
<form >
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/username-logo.JPG">
</a>
<input type="text" placeholder="DigicelID">
</label>
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/password-logo.JPG">
</a>
<input type="text" placeholder="Password">
</label>
<div align="right">
<button class="button button-clear button-assertive">
Forgot Password?
</button>
</div>
<a class="button button-block button-assertive" ng-click="testMove()" ng-controller="TestCtrl">
Login
</a>
<button class="button button-block button-assertive">
Sign Up
</button>
</form>
</div>
</div>
</ion-content>
</body>
EDIT:
My Updated controller in App.js:
No longer gives me a "undefined error" but simply does nothing? I don't know if I fully understand how to inject $scope.
.controller('TestCtrl',['$scope', '$state', function($scope, $state) {
$scope.testMove = function() {
console.log("Button was pressed!");
$state.go('userprofile');
};
}])
Try using $state.go('userprofile');
instead of location.transitionTo('/mainmenu');
(remember to inject $state into your controller to test this)