I'm using an ons-modal to show a loading text and spinner icon when the app is fetching some data.
The code is as follows:
<ons-modal var="loadingModal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
I can correctly show an hide it using loadingModal.show(); and loadingModal.hide();
But how would I know in Angular if it is shown or hidden?
Update
Apparently my not-so-elegant solution is not not so elegant after all :D
Here is a pull request that shows the method isShown() that should be available
soon I guess
Internally the function looks similar to whats in this answer
isShown() {
return this.style.display !== 'none';
}
Not a super elegant solution, but it works
if( $scope.loadingModal._element.css('display') == 'none'){
// hidden now
}else{
// visible now
}
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Modal | Onsen UI</title>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/demo/styles/app.css"/>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsenui.css">
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsen-css-components.css">
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/angular/angular.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/onsenui.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/demo/app.js"></script>
<script>
function check($el){
return $el.css('display') === 'none' ? 'hidden' : 'visible';
}
angular.module('myApp').controller('PageController', function($scope) {
$scope.open = function() {
$scope.app.modal.show();
alert(check($scope.app.modal._element));
setTimeout(function() {
$scope.app.modal.hide();
alert(check($scope.app.modal._element));
}, 2000);
};
});
</script>
</head>
<body ng-controller="PageController">
<ons-navigator>
<ons-modal var="app.modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
<ons-toolbar>
<div class="center">Modal</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button modifier="light" ng-click="open();">Open Modal</ons-button>
</p>
</ons-navigator>
</body>
</html>
Related
this result of the fetch.php that contain on the data from mysql database page
[{"id":"1","name":"Moblie phone","price":"3000","image":"mobil1","desc":"samasong mobile garand prime 2+"},{"id":"2","name":"Watch","price":"200","image":"watch","desc":"modern watch its color is gold"},{"id":"3","name":"Labtop","price":"4000","image":"labtop","desc":"hp labtop core i5 space 500gb "},{"id":"4","name":"moble lite","price":"1999","image":"mobil2","desc":"moble lite sterrr"}]
this html code
<!DOCTYPE html>
<html>
<head>
<title>shoping cart</title>
<link rel="stylesheet" type="text/css" href="functions/bootstrap.css">
<script type="text/javascript" src="functions/jquery.js"></script>
<script type="text/javascript" src="functions/bootstrap.min.js"></script>
<script type="text/javascript" src="functions/angular.min.js"></script>
</head>
<body>
<h2 align="center">Shopping cart application by angularjs and php</h2>
<div class="container" ng-app="shoppingcart" ng-controller="shoppingcartcontroller">
<div class="row " >
<div class="box col-md-3" style="margin-top: 20px"
ng-repeat="p in products">
{{p.name}}
{{p.price}}
</div>
</div>
</div>
this angularjs code
<script >
var app=angular.module("shoppingcart",[]);
app.controller("shoppingcartcontroller",function($http,$scope){
$scope.loadproduct=function(){
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
};
});
</script>
Why do you need this loadproduct function?
Please only this in your controller:
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
In addition, take in consideration to check whether you need to define '$scope.products' as an empty array outside the scope of your get request.
My html and javascript are as follows, I have the following element
<i class="material-icons" ng-click="clicked()" md-48>add_circle</i>
Which works when clicked i.e. by bringing up a dialog, however the following on the same page does not work.
html
<body ng-cloak>
<div ng-cloak ng-controller="mainController" >
<div layout="row" layout-align="end end">
<md-button aria-label="Eat cake" ng-click="clicked()"></md-button>
</div>
</div>
</body>
angular
angular.module('notifyMe', ['ngMaterial', 'material.svgAssetsCache'])
.controller('mainController', function($scope, $mdDialog) {
$scope.clicked = function () {
alert('Worked!');
};
})
No, your code should work. Make sure you loaded the dependencies as below:
DEMO
// Code goes here
angular.module('webapp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.clicked = function () {
alert('Worked!');
};
});
<!DOCTYPE html>
<html ng-app="webapp">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
<link rel="stylesheet" href="style.css" />
<!-- Angular Material Dependencies -->
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
<!-- Use dev version of Angular Material -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<div layout="column" layout-fill flex style="max-height:100%">
<md-toolbar>
<md-button ng-click=clicked()>Click here</md-button>
</md-toolbar>
</div>
</body>
</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 :)
Hi I am trying to implement facebook kind of post and reply comments using angularjs. Below is my code
<doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="HomeCtrl">
<div class="container" style="margin-top:1%;">
<div class="row">
<textarea style="width:500px" ng-model="txt" placeholder="Add a comment..."></textarea></br></br>
<button type="button" class="btn btn-default" ng-click="postData(txt)" ng-model="btn">post</button>
</div>
</div>
<div class="container" style="margin-top:1%;">
<div class="row">
<div ng-show="comment" ng-repeat="data in datas track by $index">
{{data}}
<div>
Like
comment
share
</div>
<div ng-show="innerComment">
<textarea style="width:500px; height:30px;" ng-model="txt1"></textarea></br></br>
<button type="button" class="btn btn-default" ng-click="postReplied(txt1)" ng-model="btn" ng-show="postRepBtn">Reply</button>
<div ng-show="innercmt" ng-repeat="data1 in InnerData">
{{data1}}
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('myApp', []);
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.comment=false;
$scope.innerComment=false;
$scope.datas=[];
$scope.InnerData=[];
$scope.innercmt=false;
$scope.postRepBtn=true;
$scope.postData=function(txt)
{
$scope.comment=true;
$scope.datas.push(txt);
$scope.txt='';
}
$scope.showInnerComment=function($index)
{
console.log($index)
$scope.innerComment=true;
}
$scope.postReplied=function(txt1)
{
$scope.InnerData.push(txt1);
$scope.innercmt=true;
//$scope.postRepBtn=false;
$scope.txt1='';
}
}]);
</script>
</body>
</html>
Now the problem I am facing is that (assuming I have posted 3 comments), I am not able to open reply(textarea) for that particular comment(link), Instead its opening the textarea(reply) for all the comments when clicking on any comment link.
I am not able to solve this issue.Or is there any other way to solve it?? Any help is appreciated.
Thanks
I am attching the images also
Make $scope.innerComment an array of Booleans.
$scope.innerComment = [];
Now modify it in your view as ng-show="innerComment[$index]"
This way you can set the value true for particular comment.
$scope.showInnerComment=function($index)
{
console.log($index)
$scope.innerComment[$index]=true;
}
Note: Whenever you add comment , push false in innerComment.
I am working with onsen-ui and I have the following problem:
I have a stack of onsen's components like that:
-->ons-sliding-menu var="menu"
|
|-->ons-page
|
-->ons-list-item
|
|-->ons-switch var=myswitch
Why can't I reference the var 'myswitch' from inside an angular controller? The angular controller is set in the ons-page tag.
Thank you in advance.
Sure it works, you can see the working CodePen HERE. As you can see, I used the <ons-switch> methods isChecked() and setChecked(isChecked) without any problem. If you need more than one switch don't use var but use ng-model and bind it to a variable inside the controller and manage the elements from there. This is an example, you can find the working CodePen HERE
ONE SWITCH
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
angular.module('myApp', ['onsen'])
.controller('DemoController', function($scope) {
$scope.changeSwitchStatus = function(){
if($scope.mySwitch.isChecked())
$scope.mySwitch.setChecked(false);
else
$scope.mySwitch.setChecked(true);
};
});
</script>
</head>
<body>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
<ons-template id="page1">
<ons-navigator ng-controller="DemoController">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-list>
<ons-list-item class="item">
<ons-switch var="mySwitch"></ons-switch>
</ons-list-item>
</ons-list>
<ons-button ng-click="changeSwitchStatus()">Change switch status</ons-button>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>
MULTIPLE SWITCHES
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
angular.module('myApp', ['onsen'])
.controller('DemoController', function($scope) {
$scope.switch = [
{
status: false
},
{
status: false
}
];
$scope.changeSwitchStatus = function(){
for(var i = 0; i < $scope.switch.length; i++){
$scope.switch[i].status = !$scope.switch[i].status;
}
};
});
</script>
</head>
<body>
<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1" side="left" type="overlay" max-slide-distance="200px">
</ons-sliding-menu>
<ons-template id="page1">
<ons-navigator ng-controller="DemoController">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-list>
<ons-list-item class="item" ng-repeat="item in switch">
<ons-switch ng-model="item.status"></ons-switch>
</ons-list-item>
</ons-list>
<ons-button ng-click="changeSwitchStatus()">Change switch status</ons-button>
</ons-page>
</ons-navigator>
</ons-template>
</body>
</html>