im starting to work with ionic, i tried creating a log-in page, and it works, i can see on the log that when i clicked the function executed and looked for the user, however nothing happens, i have to click 2 or 3 times so that the view can change i have no idea why this happens. i tried with the submit tag on the form too, and it stays the same.
HTML:
<body>
<ion-view view-title="Iniciar Sesion">
<ion-content has-header="true" padding="true">
<form name="loginForm" novalidate="">
<div class="row row-center">
<div class="col col-center">
<label class="item item-input">
<span class="input-label">Correo</span>
<input type="text"
ng-model="Usuario">
</label>
<label class="item item-input">
<span class="input-label">Contraseña</span>
<input type="password" ng-model="contrasena" ng-minlength="5" ng-maxlength="20" required >
</label>
<button ng-click="login(Usuario,contrasena)"value="Iniciar" class="button button-block button-calm" ng-disabled="!Usuario || !contrasena">
Iniciar
</button>
{{erronea}}
</div>
</div>
</form>
<ion-tabs class="tabs-dark tabs-icon-top">
<ion-tab title="Olvidé mi contraseña" href="#/olvide" icon="ion-information- circled" ></ion-tab>
<ion-tab title="Crear Cuenta" href="#/CrearU" icon="ion-person-add" ></ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
</body>
Javascript:
var datosLogin= function($scope,$location) {
$scope.login=function (Usuario,contrasena){
var ref = new Firebase('https://resplendent-torch-5430.firebaseio.com/');
ref.authWithPassword({
email : Usuario,
password : contrasena
},
function(error, authData) {
if (error) {
$scope.erronea="Usuario o contraseña invalida";
} else {
$location.path("/inicio");
}
});
};
}
Related
Her's the HTML code
<ion-view view-title="Reviewer Title">
<ion-content>
<div class="content no-header">
<ion-nav-bar class="bar-assertive-900" align-title="left">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-android-arrow-back" ui-sref="app.reviewers"> </button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-android-done-all"
ng-click="edtRv.edit(edtRv.e[0].id,qs_id,chs_id, rv_object,qs_object,chs_object)"> </button>
<button class="button button-icon button-clear ion-trash-b"> </button>
</ion-nav-buttons>
</ion-nav-bar>
<br> <br> <br>
<div class="blk">
<input type="text" value="{{edtRv.e[0].rev_name}}" >
</div>
<div class="button-bar">
<a class="button button-outline button-assertive" ng-click="showCard()"> show all</a>
<a class="button button-outline button-assertive" ng-click="hideCard()"> hide all</a>
</div>
<form ng-repeat="edit in edtRv.e">
<ion-item ng-if="edit.question_type_id == 1">
<ion-checkbox ng-if=""> </ion-checkbox>
<div class="list list-inset">
<div>
Rv id{{edit.id}}
Qstn id{{edit.id1}}
Chs id{{edit.id2}}
<label class="item item-input">
<b><span class="input-label item-num"> {{$index+1}}.) </span> </b>
<input type="text" ng-value="edit.question">
</label>
</div>
<div id="startCard" ng-show="showstartCard">
<label class="item item-input">
<b><span class="input-label item-num"> Answer: </span> </b>
<input type="text" ng-value="edit.answer">
</label>
</div>
</div>
</ion-item>
<ion-item ng-if="edit.question_type_id == 2">
<ion-checkbox ng-if=""> </ion-checkbox>
<div class="list list-inset">
<div>
Rv id{{edit.id}}
Qstn id{{edit.id1}}
Chs id{{edit.id2}}
<label class="item item-input">
<b><span class="input-label item-num"> {{$index+1}}.) </span> </b>
<input type="text" ng-value="edit.question">
</label>
</div>
<div id="startCard" ng-show="showstartCard">
<label class="item item-input">
<b><span class="input-label item-num"> Answer: </span></b>
<input type="text" ng-value="edit.answer">
</label>
<label class="item item-input">
<b><span class="input-label item-num"> choice 1: </span></b>
<input type="text" ng-value="edit.choice_1">
</label>
<label class="item item-input">
<b><span class="input-label item-num"> choice 2: </span></b>
<input type="text" ng-value="edit.choice_2">
</label>
<label class="item item-input">
<b><span class="input-label item-num"> choice 3: </span></b>
<input type="text" ng-value="edit.choice_3">
</label>
</div>
</div>
</ion-item>
</form>
</ion-content>
What Im trying to do is to update the reviewers title the questions and the choices that follow with just one function or one button in the view.I don't want button each item so is there's a way on how to do this?Thank you :D
Here's the Service file
service.update = function (rv_id,qs_id,chs_id, rv_object,qs_object,chs_object) {
// return $http.put(getUrlForId(id), object);
// for updating rev object
return $http.put(getRevUrlForId(rv_id), rv_object)
.then(function (result) {
console.log(result.data);
});
// for updating qstn object
return $http.put(getQsUrlForId(qs_id), qs_object)
.then(function (result) {
console.log(result.data);
});
// for updating chs object
return $http.put(getChoicesUrlForId(chs_id), chs_object)
.then(function (result) {
console.log(result.data);
});
};
Here's the controller
.controller('EditRevCtrl', function($scope, $timeout, $stateParams, $ionicPopup, ionicMaterialInk, ItemsModel, Backand) {
var edtRv = this;
edtRv.e = ItemsModel.getcontForEdit(); // use for getting reviewers info
function edit (rv_id,qs_id,chs_id, rv_object,qs_object,chs_object) {
ItemsModel.update(rv_id,qs_id,chs_id, rv_object,qs_object,chs_object);
}
})
Certainly!
First you should inject $q into your service as we will use it below.
Using Q you can pass an array of promises to be resolved.
service.update = function (rv_id,qs_id,chs_id, rv_object,qs_object,chs_object) {
return $q.all([
$http.put(getUrlForId(id), object),
$http.put(getRevUrlForId(rv_id), rv_object),
$http.put(getQsUrlForId(qs_id), qs_object),
$http.put(getChoicesUrlForId(chs_id), chs_object),
]).then(function(results) {
var UrlForId = results[0];
var RevUrlForId = results[1];
var QsUrlForId= results[2];
var ChoicesUrlForId= results[3];
return results;
})
};
I am creating an app using Ionic Framework and I'm facing a problem.
I'd like to create a search function with tags. When we click on a button, the value is given to an input.
My code :
<div id="rech-btns" class="padding" ng-model="searchQuery" ng-controller="RechCtrl">
<button class="button button-outline button-balanced espace rech-text" ng-click="showDiv('Facile')">
Facile
</button>
<!-- There are others buttons but I deleted them for you to see the whole code -->
</div>
<div id="rechrech">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<!-- <input type="search" placeholder="Recherche..." /> -->
<input type="search" ng-model="searchQuery">
<!--<input type="text" text="facile" ng-model="searchQuery">-->
</label>
<div class="padding">
<button id="paramrech" class="button button-outline button-balanced espace rech-text">
<!-- the value arrives here -->
</button>
</div>
I tried to change the value with my function but it doesn't work so I'm asking you :p
My function :
.controller('RechCtrl', function($scope) {
$scope.showDiv = function(param) {
document.getElementById('rech-btns').style.display = "none";
//so when we click, this disappear
document.getElementById('rechrech').style.display = "block";
//this appear
document.getElementById("paramrech").innerHTML = param;
//and here I don't know what to do to change what I want
};
})
Do you have any idea ?
I have this ionic page:
<ion-view view-title="Sign up for business">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-android-done" ng-disabled="bizzSForm.$invalid" ng-click="submitBizzForm()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm()" novalidate>
<div class="list">
<label class="item item-input">
<i class="icon ion-person placeholder-icon"></i>
<input type="text" placeholder="Your business or organization name" name="name" ng-model="bizzFormData.name" ng-minlength="3" ng-maxlength="50" required>
</label>
<div ng-show="bizzSForm.$submitted || bizzSForm.name.$touched">
<span ng-show="bizzSForm.name.$error.required" class="form-err-blk"><i class="ion-close-round"></i> Tell us your business or organization name.</span>
</div>
I have this controller code:
$scope.submitBizzForm = function() {
if($scope.bizzSForm.$valid) {
$scope.submitSignUpForm();
}
}
here $scope.bizzSForm is showing undefined
You can pass the bizzSForm in the ngSubmit callback, and use it as it is:
HTML
<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm(bizzSForm)" novalidate>
<!-- content -->
</form>
Javascript
$scope.submitBizzForm = function(form) {
if(form.$valid) {
$scope.submitSignUpForm();
}
};
You need to pass form name as a parameter to the function you want ngSubmit to handle.
<form name="bizzSForm" class="css-form" ng-submit="submitSignUpForm(bizzSForm)" novalidate>
You see that, form should have a name, name="bizzSForm" and pass into function, ng-submit="submitSignUpForm(bizzSForm)"
then inside controller, you just need to call it,
$scope.submitSignUpForm = function(bizzSForm) {
if(bizzSForm.$valid) {
// do something here
console.log('Form is valid');
}
}
I have a mobile app screen which is built with ionic. The following image show the screen for that.
Once I clicked the contacts button in the home screen in the mobile It will load just a white blank screen. But when I run the app through the browser It is showing. The code for the above screen and the code for the home screen are as follows. Please let me know where I got wrong. I am very new to ionic framework.
Thanks.
=============================
Code for Home Screen - Html
<ion-content id="homeContent" scroll="false" class="padding">
<div class="row">
<span class="text-center blackBold">Menu</span>
Logout
</div>
<div class="row" id="buttonsFirstWrapper">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/contacts_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/groups_btn.png" /></div>
</div>
<div class="row">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/de_duplication_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/import_btn.png" /></div>
</div>
<div class="row">
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/export_btn.png" /></div>
<div class="col col-50"><img src="http://commercepromote.com/mobile-app/configuration_btn.png" /></div>
</div>
</ion-content>
========================
Code for the internal screen which loads once click on the contacts big button
<ion-content id="homeContent" scroll="false" class="padding">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="New Contact" icon-off="ion-person-add" icon-on="ion-person-add" href="#/contacts">
<ion-nav-view name="tab-chats">
<div class="row">
Home
<span class="text-center blackBold">New Contact</span>
Logout
</div>
<div id="createContact" class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First name</span>
<input type="text" placeholder="First name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Preferred Name</span>
<input type="text" placeholder="Preferred Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">NRIC</span>
<input type="text" placeholder="NRIC">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Phone</span>
<input type="tel" placeholder="Phone">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Mobile</span>
<input type="tel" placeholder="Mobile">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="email" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Block/House No:</span>
<input type="text" placeholder="Block/House No:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Unit No:</span>
<input type="text" placeholder="Unit No:">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Street Name</span>
<input type="text" placeholder="Street Name">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Postal Code</span>
<input type="text" placeholder="Postal Code">
</label>
<label class="item item-input" style="height: 40px;">
<span class="input-label">Country</span>
<select
style="width: 100%; max-width: 100%; height: 40px;"
ng-model="engineer.currentActivity"
data-ng-options="cL.countryCode as cL.countryName for cL in CountryList">
</select>
</label>
</div>
<div id="loginBtnWrapper" class="col text-center">
<button style="margin-top: -15px" id="loginBtn" class="button button-positive">Create</button>
</div>
</ion-nav-view>
</ion-tab>
<ion-tab title="List Contacts" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/contacts">
<ion-nav-view name="tab-dash">
<div class="row">
Home
<span class="text-center blackBold">Contacts</span>
Logout
</div>
<div id="contactListing" class="list">
<div ng-repeat="eachContact in AllContacts" class="item item-button-right">
<h2 class="blackBold">{{ eachContact.FNM }}</h2>
<p class="blackBold">{{ eachContact.EML }}</p>
<p class="blackBold">{{ (eachContact.PNM != "" ? '(' + eachContact.PNM + ')' : "") }}</p>
Call
</div>
</div>
</ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
===========================================
My application.js is as follows
angular.module('XXXXXXXXXX', ['ionic'])
.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);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: '/',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('contacts', {
url: '/contacts',
templateUrl: 'templates/contacts.html',
controller: 'ContactsCtrl'
})
.state('contact-details', {
url: '/contact-details',
templateUrl: 'templates/contact-details.html',
controller: 'ContactDetailsCtrl'
})
.state('logout', {
url: '/logout',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise("/");
})
.controller('HomeCtrl', function($scope, $http, $state, $ionicPopup, AuthService) {
AuthService.isLoggedIn('home');
})
.controller('ContactsCtrl', function($scope, $http, $state, $ionicPopup, AuthService, CommonServices, $ionicLoading) {
var contactList = null,
tempStr = "",
jsonStr;
$scope.AllContacts = [];
$scope.CountryList = [];
AuthService.isLoggedIn('contacts');
$scope.CountryList = CommonServices.retrieveCountryList();
$ionicLoading.show();
$http.get('SERVICE_CALL').success(function(data) {
tempStr = data.substr(8880, data.length);
jsonStr = JSON.parse(tempStr);
if (jsonStr.Contacts.length > 0){
angular.forEach(jsonStr.Contacts, function (obj) {
if ((typeof obj.FNM != "undefined") && (obj.FNM != null) && (obj.FNM != "")){
$scope.AllContacts.push(obj);
}
});
$ionicLoading.hide();
}
});
});
Some weeks ago, I've got a similar problem with my SPA (angualar.js, BootStrap) hosted inside SalesForce, on my iPad but not on my Desktop.
Sometimes, clicking on a button or doing something finished by a empty (white) screen...
I'm not sure it is the same problem than yours, but after some test/research, I've found that the problem was triggered by having a div element (filled with a ng-repeat)with a height greater than screen height inside a main div with height and width set as 100% (google maps).
To resume, when the ng-repeat return to much items, the container div growths outside the main div
I am wondering how to store an object into a scope. I am not sure if my syntax is correct. My objective is to setup up the data-binding on this edit page, and then store the edited object on the scope. But data won't get pushed into the array
$scope.editedRecord = function (editedExpensesInfo) {
$scope.tempData.push(editedExpensesInfo)
}
$scope.save = function() {
WebApi.editData($scope.tempData);
};
TempData is my array in the service.
angular.module('app')
.factory('WebApi', function () {
var tempData = [];
return{
editData: function (data) {
return tempData = data;
},
}
}
This is my edit form
<!--Ion-nav-header-bar-->
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-back-button class="button-clear" ng-click="myGoBack()">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<!--ion-nav-side-menu-button-->
<!--<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>-->
<!--Content for Expenses page-->
<ion-content has-header="true" padding="true">
<div ng-controller="editExpensesDetailCtrl" ng-model="editedExpensesInfo">
<form name="editExpensesDetailform" ng-submit="editedRecord(editedExpensesInfo)>
<label class="item item-input ">
<b class="input-label">Owner:</b>
{{data.owner}}
</label>
<label class="item item-input">
<b class="input-label">Receipt Date:</b>
<!--{{data.modifiedDate | date: "yyyy-MM-dd"}}-->
<input style="margin-left: 20%;" ng-model="editedExpensesInfo.newDate" type="date" placeholder="Date" required>
</label>
<!--<label class="item item-input">
<b class="input-label">Claim Type:</b>
{{data.claimType}}
</label>-->
<label class="item item-input item-select">
<b class="input-label">Claim Type:</b>
<select ng-model="editedExpensesInfo.newClaimType" required>
<option value="" title="Select Claim" selected disabled>Claim Type</option>
<option ng-repeat="claim in claimType" value="{{claim.value}}"
ng-selected="{{claim.value== claimType}}">
{{claim.value}}
</option>
</select>
</label>
<br />
<!--Remarks Textfield-->
<br />
<b>Remarks:</b>
<br />
<label>
<!--<span style="margin-bottom:auto"> {{data.description}}</span>-->
<textarea ng-model="editedExpensesInfo.newDescription" rows="6" cols="50" placeholder="Your remarks..." style="resize:none; border:solid 1px;"></textarea>
</label>
</form>
<br />
<a class="button button-positive" ng-click="save()">Save</a>
</div>
</ion-content>
</ion-view>
Your controller function editedRecord is not getting called.
Check the ngSubmit documentation.
You need to add a submit button. for example:
<input type="submit" id="submit" value="Save Edit" />
Hope this helps.