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);});
};
})
Related
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>
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>
I'm trying to figure out why this toggle on Ionic with Angular doesn't work. I think that the scope of ion-nav-buttons and ion-content are conflicting.
<ion-view view-title="Movimentação">
<ion-nav-buttons side="right">
<button class="button button-icon" id="header-filter" ng-click="showFilters = showFilters ? false : true">
<i class="icon ion-search"></i>
</button>
</ion-nav-buttons>
<ion-content>
<ul class="list" ng-show="showFilters">
<label class="item item-input item-select">
<div class="input-label">
CRAAI
</div>
<select>
<option ng-repeat="item in craai"> {{ item.regiao }} </option>
</select>
</label>
</ul>
</ion-content>
</ion-view>
Can anyone help with this?
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"));
});
});
At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:
When really, I would like the the header items of What are you looking for? and Current location to be fixed:
This is my code so far:
<ion-view view-title="Nearby">
<ion-content>
<!-- Search -->
<div class="list">
<div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;">
<label class="item-input-wrapper">
<input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false">
</label>
<div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;">
<label class="item-input-wrapper">
<input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true">
</label>
<button class="button button-positive button-small" ng-click="location=''; services=''">
<i class="ion-close"></i>
</button>
</div>
</div>
<!-- List of services -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices">
{{service.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{service.total}}</span>
</i>
</ion-item>
</ion-list>
</div>
<!-- List of regions -->
<div class="list" style="margin-top:-24px">
<ion-list>
<ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations">
{{location.title}}
<i class="icon ion-chevron-right icon-accessory">
<span class="badge badge-positive">{{location.count}}</span>
</i>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
I've also created a CodePen here: http://codepen.io/anon/pen/VeQzBv.
You can use a sub-header for this it work for my code:
<ion-header-bar class="bar-light bar-subheader">
<input type="text" placeholder="Search Force" data-ng-model="searchForce">
<button ng-if="searchForce.length"
class="button button-icon ion-android-close input-button"
ng-click="clearSearch()">
</button>
</ion-header-bar>
Codepen demo
Also see this post for some alternatives: http://forum.ionicframework.com/t/how-to-make-search-bar-sticky/20721