I am trying to make simple demo in ionic. I have one footer having one icon ion-compose (bottom left icon). When I click on that icon it show a pop up screen I enter name in text field and press save button. Then it generates a row which have same text as written in textfield of popup screen. I need to add icon buttons on row (like delete button, edit button). Can we add icon on dynamically generated row as I did in footer (bottom left ion-composer)?
Please add ion on row
Here is my code
http://codepen.io/anon/pen/qdEEPW
<ion-item ng-repeat="item in items">
{{item.testcase}}
<ion-reorder-button class="ion-navicon"></ion-reorder-button>
</ion-item>
please press bottom button on left side of footer .when click it show pop up snd fill entry it generate the row.I need to add icons on row
I will show the image what i want
I need delete icon and edit button icon on row..you can choose amy icon from this link
http://ionicons.com/
Related: how to add icons in row which is generated dynamically in ionic
icons added.
You will have to add the functions for the buttons.
HTML:
<ion-item ng-repeat="item in items">
{{item.testcase}}
<button class="button {{item.close}}"></button>
<button class="button {{item.edit}}"></button>
JS:
myPopup.then(function(res) {
console.log('Tapped!', res);
if(typeof res!='undefined')
res.edit="ion-edit";
res.close="ion-close";
$scope.items.push(res)
console.log($scope.items);
});
http://codepen.io/anon/pen/XbJJzO
Related
I am trying to implement segmented control button instead of normal radio button in Angular
Although If i remove CSS class, normal radio button is working fine and remain selected on navigating to another page os clicking anywhere on the same page, but after adding CSS, radio button selection do not remain intact and deselects.
Please help with this
HTML Code :
<div class ="segmented-control">
<div ng-repeat="p in LP">
<a href="#" class="list-group-item">
<label> {{p.label}}
<input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
</a>
</div>
</div>
CSS :
.segmented-control input[type="radio"] {
visibility:hidden;
}
.segmented-control .list-group-item {
display: inline-block;
}
In controller.js
calling below function to get the value of radio button
$scope.getElement= function(obj){
$scope.test = obj.target.value;
}
There are 2 issues with your code:
You have nested elements <div><a tag><label><radio></label> but the ng-model will be set only when you click exactly on the label. If you click little outside the label the ng-model will not be updated.
The gray color change that you see when you click on the segmented button does not mean that the radio button is selected. It is applying the following bootstrap class a.list-group-item:focus which means the button is in focus. That is why when you click outside the button the color changes back to white.
To solve this you have to add extra class to highlight the selected button and make sure your ng-model is updated no matter where the user clicks inside the div.
I have created a sample jsfiddle to demonstrate both the issues. Good luck and welcome to Stackoverflow!
I declare a nav button in index page and it shown all the page But I want remove from my home page. How can I remove that button in that specific pages
make $rootScope array of pages where you don't want to show the button. Then use ng-if in button tag to show n hide the button
<button ng-if="root.pageIgnore.indexOf($route.current.name) === -1">Shy Button</Button>
I've created an ionic list with a ui-sref so that when an item is clicked on, it navigates to a specific page. I have also placed a button in the upper right corner of each list item that toggles on and off (sort of like a bookmark). However, when I click the button to toggle the bookmark, the ui-sref is also triggered, causing an unwanted page navigation. Is there any way to isolate the button in an ionic list item so when clicked, the list item navigation is not triggered?
Here is my list item code with the button:
<ion-item ng-class="{'save': item.save}" collection-repeat="item in items" ui-sref="tab.page({id:item.$id})">
<button class="icon button top-right" ng-click="item.save = !item.save" ng-class="{'ion-ios-heart button-clear button-assertive':item.save, 'ion-ios-heart-outline button-clear button-stable':!item.save}"></button>
</ion-item>
You used ui-sref directive in your ion-item, that make it as a link ( like <a> tag ) and then you add your button in between, so of-course when you click on the button, it will do the page navigation.
You need to define your button outside.
<ion-item ng-class="{'save': item.save}" collection-repeat="item in items" ui-sref="tab.page({id:item.$id})">
</ion-item>
<button class="icon button top-right" ng-click="item.save = !item.save" ng-class="{'ion-ios-heart button-clear button-assertive':item.save, 'ion-ios-heart-outline button-clear button-stable':!item.save}"></button>
Update :
basically, when you have button inside a link tag, button called first and right after the link triggered. so what you need to do is somehow return false for your ui-sref eveent if button clicked.
Since you are using angularjs, you can do this ( I didn't test it, but it should work, let me know if this worked ) :
1 - add ng-click on your ion-item
<ion-item ng-click="isNavigation()" ng-class="{'save': item.save}" collection-repeat="item in items" ui-sref="tab.page({id:item.$id})">
2 - change your button ng-click to use a function
<button class="icon button top-right" ng-click="myFunctionName(item.save)" ng-class="{'ion-ios-heart button-clear button-assertive':item.save, 'ion-ios-heart-outline button-clear button-stable':!item.save}"></button>
3 - in your controller :
$rootScope.isNavigation=true;
$scope.isNavigation=function(){
if($rootScope.isNavigation)
return true;
else
return false;
}
$scope.myFunctionName(item){
$rootScope.isNavigation=false;
return item.save = !item.save;
}
Am new to Ionic framework (Hybrid application development) from iOS native app development. I have to design a screen which should have two button like "Recent and All". If we click "Recent" the recent items should be displayed in list and if we click the "All", it should display the all items in the list. Am trying to use the "ion-slides" control to use two different lists.
I have implemented the ion-slides in the html page inside the "ion-view", it is overlapping the two buttons (Recent, All buttons are overlapping and not clickable). If I add the "ion-slides" in "ion-content" or "div", the slides are not in visible. Also, I need to change the slides based on the button actions if I click the "Recent" button need to show the first slide. I have implemented the "ionicSlideBoxDelegate" but, it is not working. How can I fix this issue? Can you please help?
<ion-view view-title="Slide Box" ng-controller='homeViewController'>
<ion-content>
<div>
<button ng-click="nextSlide()">Recent</button>
<button ng-click="previousSlide()">All</button>
</div>
<div class="slide-wrapper1">
<ion-slides pager="false" options="sliderOptions">
<ion-slide-page>
<ion-content>
<h1>First Slide</h1>
</ion-content>
</ion-slide-page>
<ion-slide-page>
<ion-content>
<h1>Second Slide</h1>
</ion-content>
</ion-slide-page>
</ion-slides>
</div>
</ion-content>
</ion-view>
Am able see the log "Next Button clicked" but, the action is not performing.
.controller('homeViewController', function($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
console.log("Next Button clicked", $ionicSlideBoxDelegate);
$ionicSlideBoxDelegate.next();
//$ionicSlideBoxDelegate.$getByHandle('burgers').next();
}
$scope.sliderOptions = {
effect: 'slide',
pagination: false,
initialSlide: 0
}
})
It doesn't work inside the div. Keep it outside of the div it will work fine.
I'm using ionic and angularJS in my application, I need to expand and collapse list view. As of now I created the list view using ion-list and ion-item without expand and collapse. Please find the code and snap below.
<ion-view view-title="Call Lists">
<ion-content class="padding">
<ion-list show-delete="false" can-swipe="true">
<div class="list card-ScheduledCalls">
<!-- Task # -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in callItems" type="item-text-wrap" ng-click="doTask()">
<img ng-src="{{item.imgSrc}}">
<h3>{{item.callCount}}</h3>
<h3>{{item.callDate}}</h3>
<p style="color:white;">{{item.callCmt}}</p>
<p style="color:white;">{{item.callType}}</p>
<p style="color:white;">{{item.assetType}}</p>
<p style="color:white;">{{item.requestedBy}}</p>
<p style="color:white;">{{item.issueType}}</p>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Now I have more details in the each list for eg: EmpName, BloodGroup, EmpTodayTaskName, TaskTime, TaskDuration, TaskComments, etc. First I will show only three fields in the list, If a user clicks the more button (mentioned in the image) I will show remaining details.
At the same time, I'm having tapping (ng-click) functionality to go next page so I restrict the user that If they select the more button only to do expand and collapse other touches it will move into next page.
How can I handle this activity in ionic and angular ?
If I understand this correctly, the app needs to go to the next page if the content inside of the ion-item is clicked. If so, why not to wrap ion-item content inside some container, for example div, and attach the required ng-click there