I want to create an alert box in ionic using angular js but when I click the alert button nothing happens. Please kindly direct me.
This is my index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS-Cordova</title>
<!-- Ionic framework - replace the CDN links with local files and build -->
<link href="lib/ionicframework/ionic.min.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="lib/ionicframework/ionic.bundle.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
<style>
.box {height:300px;padding: 10px}
</style>
</head>
<body data-ng-controller="AppCtrl">
<ion-header-bar class="bar-balanced">
<h1 class="title">Welcome to my web app</h1>
<button class="button" data-ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<ion-content>
<h1>Some Content</h1>
</ion-content>
<div class="bar bar-footer">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</div>
</body>
</html>
This is my app.js
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function() {
ionic.Platform.ready(function() {
navigator.splashscreen.hide();
});
});
function AppCtrl($scope, $log){
$scope.refresh = function(){
alert("Button Pressed");
}
}
On clicking the refresh button I expect a pop up to appear.
I was able to solve my problem using this:
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope) {
$scope.refresh = function(){
alert("Button Pressed");
};
ionic.Platform.ready(function() {
navigator.splashscreen.hide();
});
});
regards.
Related
We had to update the Bootstrap version (bs3 to bs4). We have some issues with Angularjs modal.It only works in bs3.4.1 version not even 3.4.2. Below is a similar piece of code, the problem is,
It looks like a template has been added to the dom, but the modal doesn't appear and behave like a modal. How can I solve this problem. Any help will be really appreciated.
<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$modal", function($scope, $uibModal){
$scope.click = function(){
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
}]);
app.controller("modal", modal);
function modal() {
console.log("in modal controller")
}
</script>
</head>
<body>
<div ng-app="app" ng-controller="democontroller">
<button type="button" class="btn btn-default" ng-click="click()">
Open modal
</button>
<script type="text/ng-template" id="modal.html">
<h1>modal</h1>
</script>
</div>
</body>
</html>
If you change your style link to this (in the shaded area below) the modal should work. I got the link from here fyi:
https://getbootstrap.com/docs/3.3/getting-started/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
The problem which i have been facing now is that after JSON.parse(localStorage.getItem('user_info')));
how can i put this string in $scope object ?
please suggest something for my problem.
Thanks in advance
You'll need to define an AngularJS controller and then bind it to your Ionic view with the ng-controller directive. Below is an example — I recommend playing around with it on play.ionic.io.
js
angular.module('app', ['ionic']).controller('MyController', function($scope) {
// localStorage.setItem('user_info', JSON.stringify('Hello World'));
$scope.userInfo = JSON.parse(localStorage.getItem('user_info'));
});
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">LocalStorage Example</h1>
</ion-header-bar>
<ion-content class="padding" ng-controller="MyController">
<h1>{{userInfo}}</h1>
</ion-content>
</ion-pane>
</body>
</html>
angular.module('app', ['ionic']).controller('MyController', function($scope) {
// localStorage.setItem('user_info', JSON.stringify('Hello World'));
$scope.userInfo = JSON.parse(localStorage.getItem('user_info'));
});
index.html: this is the html
<html ng-app="myapp">
<head>
<title>shruthi reddy</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script type="text/javascript">window.NRUM ||(NREUM={}),__nr_require=function(e,t...</script>-->
<script src="js/app.js"></script>
</head>
<body ng-controller="Controller">
<h1> ASHOK KUMAR PETLA</h1>
<P>VIJAYAWADA IS KING IS VANGAVEETI MOHAN RANGA. </P>
<button type="submit" ng-click="create()">swathi</button>
<button type="submit" ng-click="subject()">srisha</button>
<button type="submit" ng-click="delete()">ramya</button>
<button type="submit" ng-click="edit()">sunitha</button>
</body>
</html>
APP.JS: ui bootstrap in js file . u can send the correct answer or code. i have tried but not come the popup.
this is script of index.html
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
index.html and app.js .
pop up is not coming if the swathi is clicked.
Are you sure the templateUrl you have given that is correct or the html file is available?
Or make sure you have initialized all the required dependent modules like ui-bootstrap-tpls-0.12.1.js
I have created a plunkr for your code and that is working.
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$modal',function($scope,$modal){
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'mypage.html',
});
}
}]);
See the plunkr here-
http://plnkr.co/edit/GRgjv8fyquOQirXwWaWQ?p=preview
You need to include the -tpls.js file aswell, that file will make your own templates go into $templates.cache so you can use your own.
I can't see that you've installed the tpls file.
Also shouldn't it be $uibModal instead of $modal?like so
var app=angular.module('myapp', ['ui.bootstrap']);
app.controller('Controller',['$scope', '$uibModal', function($scope, $uibModal) {
$scope.create=function(){
var modalInstance=$modal.open({
templateUrl:'views/prakash.html',
});
}
}]);
I am using google places API in my ionic/cordova, angular based mobile app in android platform.
I am able to get search results from text field value using API but when i select an option by simply clicking on one of search results, the text box remains empty.
But when I press and keep holding the search result option for 2-3 secs, that option is selected.
It seems weird to me but it is happening.
place_changed event is not getting triggered on quick tap.
I really dont know what can be the cause of this issue? I have tried Faskclick.js to eliminate 300 ms but that didnt work though I think this issue is not related to 300 ms delay.
My code:
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(input, options);
};
Please help me out here.
I used ngMap and angular-google-places-autocomplete together in the following example.
Hope it helps.
angular.module('app', ['ionic', 'google.places', 'ngMap'])
.controller('MapCtrl', ['$scope', 'NgMap',
function ($scope, NgMap) {
$scope.location = null;
NgMap.getMap().then(function (map) {
console.log("getMap");
$scope.map = map;
});
$scope.$on('g-places-autocomplete:select', function(event, place) {
console.log('new location: ' + JSON.stringify(place));
$scope.data = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
$scope.map.setCenter(place.geometry.location);
console.log($scope.data);
});
}
]);
.map {
width: 100%;
height: 500px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script>
<link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="MapCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic map</h1>
</ion-header-bar>
<ion-content class="has-header padding">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" g-places-autocomplete ng-model="location" placeholder="Insert address/location"/>
</label>
<button ng-click="location = ''" class="button ion-android-close input-button button-small" ng-show="location"></button>
</div>
<ng-map zoom="6" class="map">
<marker position="{{data.lat}}, {{data.lng}}"></marker>
</ng-map>
</ion-content>
</ion-pane>
</body>
</html>
I didnt find its solution but https://github.com/stephjang/placecomplete is a great plugin as work around :)
I have been trying to figure out how swap stylesheets when a user clicks on my settings tap but not having any luck so far.
I am able to store the selected stylesheet in my local storage using ngstorage but the link tag is not updating. Here is my code for the link tag.
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link ng-href="css/{{theme}}.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.js"></script>
<script src="lib/ionic/js/angular/truncate.js"></script>
<script src="js/ngStorage.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<script src="js/posts.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/truncate.js"></script>
</head>
<body>
<ion-nav-view></ion-nav-view>
</body>
</html>
Then my radio button is below together with my controller code.
<script id="display-settings-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="nav-title-slide-ios7 bar-reactor">
<h1 class="title">Default Text Size</h1>
<div class="buttons close-button">
<button class="button button-icon icon ion-ios-close-empty" ng-click="closeModal()"></button>
</div>
</ion-header-bar>
<ion-content>
<form action="." ng-submit="noSubmit($event)">
<ion-radio ng-model="data.font_size" ng-value="'larger-fonts'" ng-click="save_settings('larger-fonts')">X-Large</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="'big-fonts'" ng-click="save_settings('big-fonts')">Large</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="''" ng-click="save_settings('')">Medium</ion-radio>
<ion-radio ng-model="data.font_size" ng-value="'small-fonts'" ng-click="save_settings('small-fonts')">Small</ion-radio>
</form>
</ion-content>
</ion-modal-view>
</script>
My controller is
.controller("SettingsCtrl", function($scope, $state, $ionicModal, $localStorage) {
$ionicModal.fromTemplateUrl('display-settings-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.displayhmodal = modal;
$scope.modal = modal;
});
$scope.openDisplayModal = function() {
$scope.displayhmodal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
$scope.data = {
font_size: ''
}
$scope.save_settings = function( data ) {
$localStorage.theme_data = data;
$scope.theme = $localStorage.theme;
console.log($scope.theme)
}
})
How can i change the stylesheet_link_tag to display the selected theme
<link ng-href="css/{{theme}}.css" rel="stylesheet">
Try setting the theme property on the $rootScope:
.controller("SettingsCtrl", function($scope, $state, $ionicModal, $localStorage, $rootScope) {
.....
$scope.save_settings = function( data ) {
$localStorage.theme_data = data;
$rootScope.theme = $localStorage.theme;
console.log($rootScope.theme)
}