I want to show options while pressing the button not to show dropdown box. For the reference of select. But when I try to implement it gives me dropdown box. I don't want to show it. I want to show options.
Hi This is worked for me based upon your requirement, Please have a look:
1.In your index.html add a button with a method as
<ion-content ng-controller="ExampleCtrl">
<button class="button button-bar button-positive" ng-click="showSelect()">Options</button>
</ion-content>
2.In your app.js file write the controller code with function as:
.controller('ExampleCtrl', ['$scope', '$ionicPopup',function($scope,$ionicPopup) {
$scope.values=['1','2','3','4'];
$scope.showSelect = function(){
$ionicPopup.alert({
title:'select an option',
templateUrl:'test.html'
});
}
}])
3.last and final step create a test.html file in your project and paste the code as:
<ion-view view-title="select">
<ion-content ng-controller="ExampleCtrl">
<ion-list ng-repeat="item in values">
<ion-item>
{{item}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Having any queries,Please reply..
Related
I created a multi-button screen much like this:
When I click on a button it would have an id and that id I get on its route, I did with list already, but several buttons passing parameter I still can not.
My question is how to pass that button id to another screen.
Avisos.html
<ion-view view-title="Avisos">
<ion-content style="background-color: #FF4500; background-size: cover;
background-position: center;">
<div class="row icon-row">
<div class="col text-center">
<button class="botao button button-positive" id="1">Icon</button>
<br>mais informaçoes
</div>
<div class="col text-center">
<button class="botao button button-positive" id="2">Icon</button>
<br>Avisos
</div>
<div class="col text-center ">
<button class="botao button button-positive" id="3">Icon</button>
<br>Contato
</div>
</div>
</ion-content>
</ion-view>
In that part is where I get the id, How can I get in that part the id of the chosen button? And pass it on side.id?
site.html
<ion-view view-title="Site">
<ion-content>
<ion-list>
<ion-item ng-repeat="site in sites" href="#/app/conteudoDoSite/{{site.id}}">
<span ng-bind-html="site.title"></span><span class="badge badge-assertive">{{site.post_count}}</span>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
How to pass parameter to another screen with ionic1 and angular1? Can anybody help me? What I am trying to do is that when the user clicks one of these buttons the id is passed.
I would recommend using ui-sref instead of href in this situation as it allows you to use states instead of paths and also allows you to pass variables to the next view. Here is an example:
<ion-item ng-repeat="site in sites" href="app.conteudoDoSite({id: site.id})">
You also need to make sure that the state you are trying to pass the variable to is configured to receive parameters. Which would look something like this:
.state('app.conteudoDoSite', {
url: '/conteudoDoSite/:id',
templateUrl: '/* Fill in */',
controller: '/* Fill in */'
})
I attempted to guess the state by looking at your code, but please make sure that it is correct, before copying the examples.
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
Here is my controller :
.controller('RouteController', function($scope,$timeout, $stateParams, Account) {
$scope.showRouteByCity= function(cityName){
Account.getRouteByCity(cityName).then(function (response) {
$scope.routesByCities = response.data.routeSatart;
console.log($scope.routesByCities);
});
}
}
Here I send array of objects. When i check console, i can see this :
And when i try to use ng-repeat for this object i only get blank screen.
Here is my code from view
<ion-view view-title="All routes">
<ion-content>
<ul>
<li ng-repeat=" tt in routesByCities">{{tt.time}}</li>
</ul>
</ion-content>
</ion-view>
Is there some special method to send variable to view? If I use fucntion or I made some error that i can't see.
Here is what i get in response :
Account.getRouteByCity(cityName) - reponse
SOLUTION 1.
For some reasone, when I use function, it don't want to show me info on view. I found this solution and it works. It's not so clean and nice, so if someone else have any other solution, please, share it.
var cityName = $stateParams.city;
Account.getRouteByCity(cityName).then(function (response) {
$scope.routesByCities = response.data.routeSatart;
console.log($scope.routesByCities);
});
Here I use StateParams to get city name form Url and then i show routes.I don't understand why it don't work with function()...
Try this
<ion-view view-title="All routes">
<ion-content>
<ul ng-repeat=" item in routesByCities">
<li>{{item.time}}</li>
</ul>
</ion-content>
</ion-view>
OR
<ion-content>
<ion-item collection-repeat="item in routesByCities">
{{item.time}}
</ion-item>
</ion-content>
I have an application that at the root does not require any ion-side-menus. However, there is one view that does require an ion-side-menu.
For instance, take a restaurant. You may list a bunch of options on the home view (menu, contact, map), but when you click menu you move to a view that list options for breakfast, lunch and dinner. Instead of taking the user to a new view, you'd like to slide out a menu when the user clicks breakfast with all your options.
I was able to implement this quite well, using Android as my development target. However when switching to iPhone, the view completely stops rendering at all!
Below is the ion-view I'm using:
<ion-view view-title="Menu">
<ion-content>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-list>
<ion-item ng-repeat="meal in vm.meals" ng-click="vm.onMealClick(meal.name)">
{{meal.name}}
</ion-item>
</ion-list>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="item item-button-left">
{{vm.selectedMeal}}
<button class="button button-clear button-small" menu-close>
<i class="icon ion-close"></i>
</button>
</div>
<ion-list>
<ion-item>Eggs</ion-item>
<ion-item>Cereal</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
</ion-content>
And this is the menu toggle binding:
var vm = this;
vm.onMealClick = onMealClick;
function onMealClick(meal) {
vm.selectedMeal = meal;
$ionicSideMenuDelegate.toggleRight();
};
Does anyone know of issues using ion-side-menus inside of an ion-view? In my real application, this provides an extremely organized user-experience, so it's something I'd like to keep pursuing and not change the layout to accommodate.
Thanks for any and all help.
I'm all new to Ionic, and this is my first project. I'm creating a little app with tab navigation in the bottom.
One tab view looks like this:
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
I want to add a button in the header next to Account, and according to documentation you use the ion-nav-bar elements, but no button shows up when I try this. Can anyone give me a clue how to add buttons in the header, in a tab view?
You can make use of ion-nav-button like this:
<ion-view title="Account">
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
I'm a button on the left of the navbar!
</button>
</ion-nav-buttons>
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
Example 1
Example 2