I have a view with a simple button opening a modal in an Ionic+Angular app. And a modal template appearing correctly after the button is clicked:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Popular tags</h1>
<div class="buttons">
<button class="button button-clear button-stable" ng-click="closePopularForm()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item-divider text-center">
Select a tag to follow.
</div>
<label class="item">
<button class="button button-balanced" ng-click="addPopularTag('china')">China</button>
<button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button>
<button class="button button-balanced" ng-click="addPopularTag('us')">United States</button>
</label>
</div>
</ion-content>
</ion-modal-view>
As you can see the modal contains 3 buttons, each calling the same function but with different parameter. I have this controller containing the function:
app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
$ionicModal.fromTemplateUrl('add-popular.html', { scope: $scope }).then(function(modal) {
$scope.modalPopular = modal;
});
$scope.closePopularForm = function() {
$scope.modalPopular.hide();
};
$scope.openPopularForm = function() {
$scope.modalPopular.show();
};
$scope.addPopularTag = function(poptag) {
console.log(poptag);
console.log('pop form submited '+poptag);
};
});
The problem is that whichever button is clicked in the modal, the function addPopularTag is called with the parameter of the first button (which is china in this case). I have checked the html source of the buttons and they are rendered correctly with different parameters.
Here is a reproduction of the issue in Codepen.
You can see it in the console.
Replace
<label class="item">
<button class="button button-balanced" ng-click="addPopularTag('china')">China</button>
<button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button>
<button class="button button-balanced" ng-click="addPopularTag('us')">United States</button>
</label>
with
<button class="button button-balanced" ng-click="addPopularTag('china')">China</button>
<button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button>
<button class="button button-balanced" ng-click="addPopularTag('us')">United States</button>
I don't know what the label does though
Related
I have buttons which are creating dynamically after form submission.
<template name="workflow">
{{#each newaction}}
<div class="btn-box" >
{{> actioncardsubcontent}}
<button type="button" class="cancelsub" >New Action</button>
<button type="submit" class="createbtnsub" >Show Options</button>
</div>
{{/each}}
</template>
When I click on "Show Options" button the two buttons should hide and displays the content in the below template.
<template name="actioncardsubcontent">
<div class="subcontent" id={{_id}} >
<div class="modulepath"><div>{{module_list}}</div></div>
<div class="linkto"><div>Linked To: <div class="linkto-color">{{link}}</div></div></div>
<div class="description"><div>Notes:<br>{{description}}</div></div>
<div class="btn-box showoption">
<button type="button" class="hideoption">Hide Options</button>
<button type="submit" class="requestextension">Request Extension</button>
</div>
</div>
</template>
and My JS is:
Template.workflow.events({
"click .createbtnsub" : function(){
$("#"+this._id).show();
$('.createbtnsub').hide();
$('.cancelsub').hide();
With the above Js it is hiding for all the cards buttons when I click on particular card. So can anyone correct me. How to write dynamic id for those buttons to make it work for particular card.
please try it :
Template.workflow.events({
"click .createbtnsub" : function(){
$('.createbtnsub').hide();
$('.cancelsub').hide();
$(this).show();
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 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:
I recently tried creating an ionic side menu. I had a problem where when I swiped the main body it opened up the menu. But I took the swipe function off and now I can't open the menu. I want to be able to click the navicon icon to be able to open the menu but don't know how to do it.
Here is the JavaScript:
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
Here is the header code which contains the button:
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<td-cards class="theLabel" id="card" ng-repeat="task in activeProject.tasks">
<td-card class="card-{{card.index}}">
<h4 style="text-align:center"> {{task.title}}</h4>
</td-card>
</td-cards>
Here is the menu content:
<ion-side-menu side="left">
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
<edge-drag-threshold="true" drag-content="true">
</ion-content>
</ion-pane>
</ion-side-menus>
Ionic has a handy menu-toggle directive to use so you can toggle the menu on a button like this.
http://ionicframework.com/docs/api/directive/menuToggle/
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
In index.html, replace menu-toggle="left" with ng-click="toggleProjects()" and in app.js add this
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};
Here is what I do:
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{ activeProject.title }}</h1>
</ion-header-bar>
In app.js, check with $ionicSideMenuDelegate.isOpen()
$scope.toggleSideMenu = function() {
if ($ionicSideMenuDelegate.isOpen()) {
$ionicSideMenuDelegate.toggleLeft(false); // close
} else {
$ionicSideMenuDelegate.toggleLeft(); // open
}
};
I'm trying to put in a list two button icons that can be clicked. I tried doing something like this but the icons overlap:
<ion-list>
<ion-item ng-repeat="item in items" class="item-button-right">
{{ item.Info }}
<button class="button button-positive" ng-click="Accept(item)">
<i class="icon ion-checkmark"></i>
</button>
<button class="button button-assertive" ng-click="Reject(item)">
<i class="icon ion-close"></i>
</button>
</ion-item>
</ion-list>
The desired behavior I'm trying to get is show some small blurb of info on the left and present two options on the right.
I have a Simple Self Contained Correct Example here: http://codepen.io/anon/pen/vzLob
I recently ran into this problem and discovered that Ionic provides a class called .buttons which when wrapped around multiple button elements positions them side by side.
This avoids having to use !important which in general is considered bad practice in CSS.
Here's an example of the code which worked for me:
<div class="item item-button-right">
List item 1
<div class="buttons">
<button class="button button-energized">
<i class="icon ion-android-locate"></i>
</button>
<button class="button button-dark">
<i class="icon ion-android-arrow-forward"></i>
</button>
</div>
</div>
Also noticed your code pen attachment so thought i'd update that too to demonstrate.
http://codepen.io/anon/pen/bNjypG
Here is an example
<ion-view ng-controller="inspectorsCtrl as vm">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat=" item in vm.items" class="item-icon-right">
{{item.info}}
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Try like this:
First take one div class and then take 2 buttons inside the div tag.
<div class="buttons" >
<button class="button button-icon" >
<i class = "icon ion-funnel"></i>
</button>
<button class="button button-icon" >
<i class = "icon ion-android-document"> </i>
</button>
</div>
The solution using .buttons works only if the text is not long or if there are only two icons.
Along with flexbox it works in any situation.
<ion-list>
<ion-item
ng-repeat="item in items"
class='item-multiple-buttons'
>
<div class="buttons buttons-left">
<button class="button button-icon ion-checkmark-circled"></button>
<button class="button button-icon ion-information-circled"></button>
</div>
<div class="item-content" >
{{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
<div class="buttons buttons-right">
<button class="button button-icon ion-close-circled"></button>
<button class="button button-icon ion-help-circled"></button>
<button class="button button-icon ion-minus-circled"></button>
<button class="button button-icon ion-plus-circled"></button>
</div>
</ion-item>
</ion-list>
SCSS:
/* Variable values from ionic */
$item-padding: 16px;
$item-icon-font-size: 32px;
// From _button.scss, hardcoded value
$button-icon-padding: 6px;
.item {
&.item-multiple-buttons{
display: flex;
padding: 0 $item-padding;
.item-content{
flex: 1;
padding: $item-padding 0;
}
.buttons{
display: flex;
&.buttons-left{
margin-right: $item-padding - $button-icon-padding;
}
&.buttons-right{
margin-left: $item-padding - $button-icon-padding;
}
.button{
font-size: $item-icon-font-size;
}
}
}
}
Codepen: http://codepen.io/M1k3l/pen/PWBdOB