I am unable to view object in the page. Can someone help to take a look what am i missing here ? I have my code in code pen http://codepen.io/ccrash/pen/wWXVGj . Really need someone to help out. When I clicked on the list in mainpage, it should bring me to the second page where user details should be displayed. But, I am not seeing any details here.
In App.js
.state('app.person', {
url: "/person/:personId",
views: {
'menuContent': {
templateUrl: "templates/people-detail.html",
controller: 'PersonDetailCtrl'
}
}
})
Controller.js
.controller('PersonDetailCtrl', function($scope, $stateParams, Session, $state, $ionicHistory) {
var Persons = [
{id: 1, name: 'Mickey', Tel: '12345'},
{id: 2, name: 'Donald', Tel: '23444'},
{id: 3, name: 'Goofy', Tel: '12323'}
];
$scope.person = Persons[$stateParams.personId];
})
In people-detail.html
<ion-content ng-controller="PersonDetailCtrl" class="background">
<div>
<i class="{{person.id}}"> </i>
</div>
<div>
<i class="{{person.name}}"> </i>
</div>
</ion-content>
This $scope.person = Persons[$stateParams.locationId]; should be $scope.person = Persons[$stateParams.personId];
Related
I find myself creating the plugin named "owl.client.js" and enter this part to add a component consuming owl-carousel.
import carousel from 'v-owl-carousel'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.component('carousel', carousel)
})
However when I call this component within a page example:"App.vue" and enter this script it renders me as if the carousel component does not exist, despite checking in vue-devtools. For reference I say that in the same way I called it in an application in Nuxt2 where everything worked.
<template>
<div>
Hi
<section class="expertos-section">
<client-only>
<carousel
:rewind="false"
:items="3"
:margin="20"
:nav="false"
:dots="false"
:responsive="{
0: { items: 1, nav: false,stagePadding:50 },
768: { items: 2, nav: false },
992: { items: 3, nav: false },
}"
>
<div v-for="item in 6" :key="item">
<div class="post__inside">
<figure class="post__imagen">
<img src="https://www.10wallpaper.com/wallpaper/medium/1205/twilight_blue_moon_mountains-HD_Space_Wallpapers_medium.jpg" alt=" " />
</figure>
</div>
<div class="post__info">
<strong>Testeado</strong>
<h3 class="event-title">Description de target</h3>
</div>
</div>
</carousel>
</client-only>
</section>
</div>
</template>
<script>
const carousel = () =>{ typeof window !== "undefined" ? import("v-owl-carousel") : null}
export default {
components:{
carousel
}
}
</script>
I am trying to allow an item to be pushed to a list of times that I looped through using Vue.js. I don't understand why when I click on the button the list item appears but the text doesn't.
HTML
<div id="root">
<input v-modle="newCat" v-on:keyup.enter="addKitty">
<button v-on:click="addKitty">
+add
</button>
<ul>
<li v-for="cat in cats">{{ cat.name }}</li>
</ul>
</div>
Vue.js
app = new Vue({
el: '#root',
data: {
cats:
[{name: 'kitkat'},
{ name: 'fish'},
{ name: 'henry'},
{ name: 'bosco'}],
//new data set
newCat: ''
},
methods: {
addKitty: function() {
this.cats.push({
name: this.newCat
})
this.newCat = ''
}
}
})
There is a typo in your code.
<input v-modle="newCat" v-on:keyup.enter="addKitty">
Should be:
<input v-model="newCat" v-on:keyup.enter="addKitty">
Notice the different spelling for v-model.
I am only asking for someone to please look at my code and tell me why I can't go from login to sign up page after clicking a button.
my login page code is
<ion-view view-title="Login" >
<ion-content class="padding">
<label class="item item-input">
<input type="text" placeholder="email">
</label>
<label class="item item-input">
<input type="text" placeholder="Password">
</label>
<button class="button">login</button>
<a nav-transition="android" href="#/sign-up">
<button class="button">Sign up</button>
</a>
<button class="button">Forgot password</button>
</ion-content>
my sign up page looks like this
<ion-view view-title="Sign Up" >
<!-- content goes here -->
<ion-list>
<ion-item>
<h2>My Profile</h2>
<div class="list">
<label class="item item-input">
<span class="input-label">Age*</span>
<input type="range" name="volume" min="18" max="100" value="21">
</label>
<label class="item item-input">
<span class="input-label">Gender*</span>
<select>
<option>Male</option>
<option>Female</option>
</select>
</label>
</div>
</ion-item>
</ion-list>
</ion-content>
finally my app.js page looks like
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('social-arena', ['ionic', 'social-arena.controllers', 'social-arena.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('signup', {
url: '/signup',
views: {
'signup': {
templateUrl: 'templates/sign-up.html',
controller: 'SignUpCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
You can use ui-sref to go to a state:
<a nav-transition="android" ui-sref="signup">
Or href to go to a url:
<a nav-transition="android" href="#/signup">
You want your href to look like this:
<a nav-transition="android" href="#/signup">
the href should match the url you give in your state:
.state('signup', {
url: '/signup', // should match this
views: {
'signup': {
templateUrl: 'templates/sign-up.html', //not this
controller: 'SignUpCtrl'
}
}
});
not the template url.
edit
I see in the comments in your code that you are trying to use the tabs directive and I also noticed that you are missing an abstract state, Ionic's guide for setting up routing can help you through the steps.
From the example on Ionic Docs
$stateProvider.state('app.todos', {
abstract: true,
url: '/todos',
views: {
todos: {
template: '<ion-nav-view></ion-nav-view>'
}
}
})
As you can see, they set one view as and abstract
abstract:true,
and then have the rest of your views link to the abstract, again from the docs:
$stateProvider.state('app.todos.index', {
url: '',
templateUrl: 'todos.html',
controller: 'TodosCtrl'
})
I am new to the Ionic Framework. I just started building a few functionalities in AngularJS. Here, what I want is to enter the email and booking ID of a user in an HTML page and then redirect it to other pages which displays all email ids and booking id... Here is my code:
Reservation.html:
<form ng-submit = "goBooking(data)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Enter Your Email Id" ng-model="data.emailId" required>
</label>
<label class="item item-input">
<input type="text" placeholder="Enter Your Booking Id" ng-model="data.bookingID" required>
</label>
</div>
<div class="padding">
<input type="submit" class="button button-block button-positive" value = "Submit" />
</div>
</form>
</ion-content>
</ion-view>
Reservation.JS
Controller.js:
.controller('reservationCtrl', function($scope, $state, $stateParams) {
$scope.toDoListItems = [{
emailId: 'versha',
bookingID: '123'
}, {
emailId: 'rahul',
bookingID: '456'
}];
$scope.getTotal = function(){
return $scope.toDoListItems.length;
}
$scope.goBooking = function(data){
$scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
$state.go('myBookingDetails');
data.emailId = ' ';
data.bookingID = ' ';
};
});
myBookingDeatils.html:
<ion-view view-title="Hotel Reception">
<ion-content>
<ion-list>
<ion-item ng-controller = "reservationCtrl" ng-repeat="item in toDoListItems">
<p> Welcome {{item.emailId}} !!!! </p>
ion-item>
</ion-list>
</ion-content>
</ion-pane>
</ion-view>
After running this,
I am getting output as
Welcome, Versha!!
Welcome, Rahul!!
I am not getting that email ID and Booking ID. What I am entering on my Reservation.html. I think my input values are not being set in the toDoListItems.
Somewhere, this code is not inserting the values $scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
Please Suggest!! Thanks in Advance!!
I am assuming you are using the same controller for each state? When you change states you reload your controller, which resets your $scope.toDoListItems array to it's inital state. You are going to want to save your toDoListItems in a Service. So...
Controller:
.controller('reservationCtrl', function($scope, $state, $stateParams, toDo) {
$scope.getTotal = function(){
return toDo.toDoListItems.length;
}
$scope.goBooking = function(data){
toDo.toDoListItems.push({
emailId:data.emailId,
bookingID:data.bookingID
});
$state.go('myBookingDetails');
data.emailId = null;
data.bookingID = null;
};
});
Service:
.factory('toDo', [function () {
var toDoListItems = [{
emailId: 'versha',
bookingID: '123'
}, {
emailId: 'rahul',
bookingID: '456'
}];
return {
toDoListItems : toDoListItems
};
}]);
This will ensure that the data survives the state change, however if you want this data to persist permanently and stay on page reloads etc.. you will need to hook up a database, if you are purely a front end guy I suggest looking at Firebase
A very simple way to accomplish this would be to just use $localstorage.
Something like this:
$scope.goBooking = function(data){
$scope.toDoListItems.push({emailId:data.emailId,bookingID:data.bookingID});
$localstorage.setObject('toDoListItems', $scope.toDoListItems);
$state.go('myBookingDetails');
};
And then inside of your new view (where the controller and scope are getting refreshed as Jacob pointed out)
$scope.toDoListItems = $localstorage.getObject('toDoListItems');
You'll just need to add the $localstorage service to you services (detailed in link below). For more info on using localstorage with Ionic, visit: http://learn.ionicframework.com/formulas/localstorage/
I'm developing an App with Ionic Framework, and I only want to show a side-menu in some concrete views, but not in every view.
I' have my menu.html file:
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content class="mymenu">
<div id="menu-list">
<ion-list class="list">
<ion-item item-type="item-icon-left" nav-clear menu-close href="#">
<i class="icon ion-home"></i><span>Menu Item</span>
</ion-item>
...
</ion-list>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My index.html's body tag looks exactly like this:
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
And the JavaScript code where I set up my App states:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
.state('app.page2', {
url: "/page2",
views: {
'menuContent' :{
templateUrl: "templates/page2.html"
}
}
})
// etc...
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/page1');
});
page1.html and page2.html both contain the following structure:
<ion-view title="something">
<ion-content>
... // here comes the html content of the page
</ion-content>
</ion-view>
What can I actually do to only show my side-menu (menu.html) on page1.html and not on page2.html?? Is there anything I'm missing??
Is there a way of inserting the menu.html content only on those pages I want it to appear and forgetting about creating the state that uses it as templateUrl?
The reason why your all your pages have side menu is because you 'app' state as their parent state. When a state is activated, its templates are automatically inserted into the <ion-view> of its parent state's template. If it's a top-level state, because it has no parent state then its parent template is index.html. The app state has the side menu in it.
Your code should look like this:
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
//this state has the 'app' state (which has the sidemenu) as its parent state
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
//this state has no parent, so it uses 'index.html' as its template. The index page has no
//sidemenu in it
.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html"
}
})
///more code here
});
Check out https://github.com/angular-ui/ui-router/wiki
if your problem is simple , use
onExit: function(){
angular.element(document.querySelector('#menuAPP')).removeClass('hidden');
}
into state
just add hide-nav-bar=" true " in ion-view
<ion-view title="Login" **hide-nav-bar="true"** id="page" class=" "> </ion-view>