ng-click not working in ionic application

ng-click not working in ionic application - javascript

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"));
});
});

Related

Toggle item on Ionic after click on button

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?

Keep header fixed on scroll in Angular/Ionic application

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

Ionic <ion-scroll>/<ion-content> scrolls further than screenlength

Here is a demonstration of what is going wrong: Video
The pane scrolls too far, it should stop after the last button but it seems to scroll for exactly another page-height.
I have multiple ion-contents but I hide the ones that I don't use at that moment with ng-class="ng-hide"
<body>
<!-- Five number code -->
<div class="animated fadeInRight" data-ng-class="numberCodeShow">
<ion-content scroll="false" style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<form data-ng-submit="showDashboard(code.fiveNumberCode)">
<ul class="fieldList padding">
<li><p style="text-align: center; padding-top: 10px;">Log in met de 5-cijferige code</p></li>
<li class="loginCodeWrapper">
<div class="input">
<input class="loginCode" data-ng-model="code.fiveNumberCode" type="tel" name="code" maxlength="5" required/>
</div>
</li>
</ul>
<div class="padding">
<button data-ng-style="{'border-bottom-color': style.style1}" style="background-color: #FFFFFF" type="submit" class="button button-block button-default signinbutton">Sign In<i data-ng-style="{'color': style.style1}"class="icon ion-arrow-right-c signinIcon"></i></button>
</div>
</form>
</ion-content>
</div>
<!--// Five number code //-->
<!-- Dashboard -->
<div class="animated fadeInLeft dashboard" data-ng-class="dashboardShow">
<ion-content scroll='true' style="position:static;" scrollbar-y="false">
<div id="splash">
<p class="logo">
<span class="leftUpColors" data-ng-style="{'background-color': style.style1}"></span><span class="leftDownColors" data-ng-style="{'background-color': style.style2}"></span><img class="homeimage" data-ng-src="data:image/png;base64,{{style.logo}}"></p>
</div>
<div class="details">
<p class="welcomeName" data-ng-style="{'border-bottom-color': style.style1}"><i data-ng-style="{'color': style.style1}" style="padding-right: 5px;" class="fa fa-user"></i>Welkom {{user.name}}</p>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Accordering</label>
<div>
<div class="padding">
<button data-ng-click="showOpenDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder-open buttonIconLeft"></i>Mijn openstaande taken</button>
</div>
<div class="padding">
<button data-ng-click="showAllDocuments()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-folder buttonIconLeft"></i>Alle Documenten</button>
</div>
<label data-ng-style="{'border-bottom-color': style.style2, 'color': 'black'}">Overige</label>
<div class="padding">
<button data-ng-click="getOrganisations()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-contacts buttonIconLeft"></i>Contactpersonen</button>
</div>
<div class="padding">
<button data-ng-click="showImageUpload()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-camera buttonIconLeft"></i>Foto Uploaden</button>
</div>
<div class="padding">
<button data-ng-click="backToFolders()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-document-text buttonIconLeft"></i>Bestanden</button>
</div>
<div class="padding">
<button data-ng-click="showNotifications()" data-ng-style="{'border-bottom-color': style.style1}" style="margin: 0; background-color: #FFFFFF" class="button button-block button-default"><i data-ng-style="{'color': style.style1}"class="icon ion-android-notifications buttonIconLeft"></i>Notificaties</button>
</div>
</div>
</div>
</ion-content>
</div>
<!--// Dashboard //-->
This is a piece of the code so you can see how I build it up. The variables that are in the code are either ng-show or ng-hide. In this case numberCodeShow = 'ng-hide' and dashboardShow = 'ng-show'.
I tried setting max-height on ion-scroll but it doesn't work. Does anyone know why this problem occurs?

Seems I have fixed it myself by putting scroll = false on the and make a seperate underneath with height:100vh;
To answer A. Vin's question:
This looks like what I had:
<ion-content scroll=true>
.....
.....
.....
</ion-content>
This resulted in the scroll going to far because of an upper div.
This fixed the problem:
<ion-content scroll=false>
<ion-scroll style="height:100vh">
...
...
...
</ion-scroll>
</ion-content>
I hope this resolves your issue too!
If you have any other questions feel free to ask :)

$scope value in ionic angularjs is not updates the side-menu

I am stuck with an issue in my ionic app that has a side menu with name and picture and it's parent and abstract:true. In that same controller, there is an update function where it updates scope.picture, but the side menu picture is not updated.
controller('AppCtrl', function($scope,$window,$rootScope,$location,$http,$state,$cordovaCamera,$ionicLoading,$q,login_Service)
{
$scope.user_Name=$rootScope.u_name;
$scope.uid=$rootScope.user_id;
$scope.pass=$rootScope.password;
$scope.user_Picture=$rootScope.pic;
$scope.whats=$rootScope.wh;
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
});
this is side-menu template
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-light nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<!-- Sidebar Content -->
<ion-content class="gem-sidebar dark">
<!-- Profile Box - Extends ionic's .row -->
<div class="row gem-sidebar-profile-box">
<!-- Profile Thumb -->
<div class="col col-25">
<img src="img/gemionic/no-photo.jpg" ng-if="!user_Picture" class="gem-profile-image" alt="">
<img src="http://www.cssolutionshub.com/php/images/user_img/{{user_Picture}}" ng-if="user_Picture" class="gem-profile-image">
</div>
<!-- End Profile Thumb -->
<!-- Profile Name -->
<div class="col col-50">
<h6> <a menu-close href="#" ng-click="edit_prof()">Edit Profile</a></h6>
<h5 ng-if="user_Name !== undefined">{{user_Name}}</h5>
<h4>{{whats}}</h4>
</div>
<!-- End Profile Name <a -->
<!-- Account Settings Icon -->
<div class="col col-25 gem-text-center">
<i class="gem-profile-settings-icon ion-volume-high"></i>
</div>
<!-- End Account Settings Icon -->
</div>
<!-- End Profile Box -->
<!--<ion-list>
<ion-item class="item-ng-click" nav-clear menu-close ng-click="login()">Login</ion-item>
<ion-item nav-clear menu-close href="#/app/feed">Feed</ion-item>
<ion-item nav-clear menu-close href="#/app/start">Starter View</ion-item>
</ion-list> -->
</ion-content>
<!-- End sidemenu content -->
</ion-side-menu>
</ion-side-menus>
and this is my edit template where update function is clicked
<!-- Title for header bar (refer to www/index.html) -->
<ion-view title="Edit Profile">
<!-- ======================
LEFT SIDE BUTTON
====================== -->
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<!-- ======================
RIGHT SIDE BUTTON
====================== -->
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-checkmark-circled"></button>
</ion-nav-buttons>
<!-- ======================
MAIN CONTENT SECTION
====================== -->
<ion-content class="has-header gem-ion-content profile-edit">
<!-- ======================
GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- <div class="gem-profile-media">
<div class="gem-profile-details profile2">
<div class="text-center">
<i class="icon ion-plus-circled add-user-pic-icon"></i>
<p class="uppercase">Add user pic</p>
</div>
</div>
</div> -->
<img ng-if="topic.picture !== undefined && img===undefined " ng-src="http://www.cssolutionshub.com/php/images/user_img/{{topic.picture}}" alt="" width="100%" height="20%" ng-click="addMedia()">
<img ng-if="topic.picture === undefined && img===undefined" ng-src="img/gemionic/no-photo.jpg" width="100%" height="20%" ng-click="addMedia()">
<img src="{{img}}" ng-if="img!==undefined" width="100%" height="20%" ng-click="addMedia()">
<!-- ======================
END GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- Standard Ionic List -->
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">What Now</span>
<input type="text" ng-model="topic.whats">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="password" ng-model="topic.password">
</label>
<button class="button button-full button-positive" ng-click='update_u(topic)'>
Update
</button>
<button class="button button-full button-positive" ng-click='go_feed()'>
Cancel
</button>
</div>
</ion-content>
</ion-view>

Try the following:
$scope.update_u=function(topic){
$scope.whats = topic.whats;
$scope.user_Picture=topic['picture'];
}

You may try this (inside the AppCtrl). The code inside $ionicView.beforeEnter function will be executed everytime the view is called:
$scope.$on('$ionicView.beforeEnter', function () {
// Code you want executed every time view is opened
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
}

This also may be due to caching of your controller. You can stop it at the route.js by using cache: false, line. See this for a similar solution:

Two-Way data binding (ionic / sqlite / angularjs)--NOT WORKING

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);});
};
})

Develop Reference

JavaScript is the programming language of the Web.

ng-click not working in ionic application - javascript

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")); }); });

Related

Toggle item on Ionic after click on button

Keep header fixed on scroll in Angular/Ionic application

Ionic <ion-scroll>/<ion-content> scrolls further than screenlength

$scope value in ionic angularjs is not updates the side-menu

Two-Way data binding (ionic / sqlite / angularjs)--NOT WORKING

Categories

Resources