The easy fix to allow your Web App to read remote json files from the server is to create the .htaccess file.
Create an `.htaccess` file and place it in the directory of the json files.
<Files "*.json"> Header set Access-Control-Allow-Origin "*" </Files>
Simply reload your app and it should work! good luck!
When testing Ionic or Angular app you might need to set CORS policy to access a service on a different domain. One way to do this in PHP for testing is to send OK responses for all OPTIONS requests. (If you are testing POST and GET requests)
In your php file set:
// change to your app origin
header('Access-Control-Allow-Origin: http://localhost:8100');
header ("Access-Control-Expose-Headers: Content-Length, X-JSON");
header ("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
header ("Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Accept-Language, X-Authorization");
header('Access-Control-Max-Age: 86400');
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
// The request is using the POST method
header("HTTP/1.1 200 OK");
return;
}
Don’t ship this test code, this is just for your internal testing of http requests.
How to mask and unmask input element password type in ionic/angular/js:
this.togglePasswordField = function () {
console.log("toggle password field called");
if (document.getElementById("passwordElement").type == "password") {
document.getElementById("passwordElement").type = "text";
document.getElementById("passwordHideIcon").classList.remove("ion-eye");
document.getElementById("passwordHideIcon").classList.add("ion-eye-disabled");
}
else {
document.getElementById("passwordElement").type = "password";
document.getElementById("passwordHideIcon").classList.remove("ion-eye-disabled");
document.getElementById("passwordHideIcon").classList.add("ion-eye");
}
}
This way only uses basic html element manipulation.
passwordHideIcon element is a button that calls the function and uses the ionic icon for eyes and eyes disabled.
To disable back button in Android put one of the codes below in your app.js in the .run function.
// app.js
// Disable Back in Entire App
$ionicPlatform.registerBackButtonAction(function(){
event.preventDefault();
}, 100);
Or Conditionally Disable Back:
// app.js
$ionicPlatform.registerBackButtonAction(function(){
if($ionicHistory.currentStateName === 'someStateName'){
event.preventDefault();
}else{
$ionicHistory.goBack();
}
}, 100);
The issue seems to be in the modal.js file of the ionic library
https://github.com/driftyco/ionic/blob/1.x/js/angular/service/modal.js#L194
The temporary fix:
var isInScroll = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'scroll');
if (isInScroll !== null && !isInScroll) {
e.preventDefault();
}
Another possible solution is to add the class=”scroll” to your input element that is of type range.
Link to the github issue.
How To Remove Empty Line from Ionic & Angular 1 List Select Options:
One solution is to make option hidden and use ng-if.
<select ng-options="option.value as option for option in optionArray">
<option value="" ng-if="false"></option>
</select>
For Angular above 1.4 use ng-show=”false” instead of ng-if.