I am trying to use the ngmaps directive for ionic but it doesnt seem to display anything when i use it. I am trying to create the url with json data, it should be putting latitude and longitude into the map center but nothing shows up, not even the map.
<div id="gmap" ng-controller="mapCtrl">
<div map-data="https://maps.google.com/maps/api/js"
map-data-params="{{googleMapsUrl}}">
<ng-map center="{{office.LatLong}}" zoom="3"></ng-map>
</div>
.controller('mapCtrl', function(NgMap, $scope) {
NgMap.getMap().then(function(map) {
console.log(map.getCenter());
//console.log('markers', map.markers);
//console.log('shapes', map.shapes);
$scope.googleMapsUrl="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGAHnplGPjFoVvShk6Tsna3-DN8rHQBI8";
});
})
Here is a working Plunker based on ngmap:
There was a problem with your divs (not closing), here is the right sintax:
<div id="gmap" >
<div map-data="https://maps.google.com/maps/api/js" map-data-params="{{googleMapsUrl}}">
<ng-map center="{{office.LatLong}}" zoom="4"></ng-map>
</div>
</div>
Related
Using:
angularjs 1.5.3
ui-bootstrap 1.3.2
This is my template:
<div id="content" class="center">
<div id="title">
<uib-carousel active="true" interval="5000" ng-if="slides && slides.length">
<uib-slide ng-repeat="slide in slides track by slide.name">
<img ng-src="{{ slide.image }}" />
<div class="carousel-caption">
<p>{{ slide.description }}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
Somewhere in my code I perform a call (with a working service I used many times) like this:
Index.controller('Index.Main', ['$scope', '$sce', 'MyService', function($scope, $sce, myService) {
$scope.slides = [];
myService.loadStuff($scope, ..., function(){
console.log($scope.slides);
}, function(data, status) {
console.log('Could not retrieve stuff');
}).update();
}]);
Which can be detailed as follows:
MyServices calls $http.get behind the scenes.
An array of slides will be shown by console when there is an http success. Right now this is the case.
An error message will be shown by console when there is an http error. Right not it is NOT the case.
Finally, the images are attached correctly to the dom. I can be sure about this because I can inspect it in my browser. however the carousel height (and contents height) is 0.
What am I missing? How can I fix it?
I actually forgot to correctly specify the index property. If there is no index to match against, then there is no way to tell which image is active. When no image is active, the container has height 0
From uibootstrap doc:
As you can see, you need to declare the height of the carousel in the container div
I am using Fusion chart with Angular js, data is arriving from json using get request but not loaded to chart. Message "no data to display" is displayed.here is my controller code.
var myApp=angular.module('angularApp',[]);
myApp.controller('countByOperator',function($scope,$http)
{
$http.get("angular/controllers/data/callcountbyoperator.json").success(function(response){
$scope.dataSource=response.data;
alert($scope.dataSource);
FusionCharts.ready(function(){
var countByOperator=new FusionCharts({
type:'bar2d',
renderAt:'countByOperator',
width:'450',
dataFormat:'json',
dataSource:$scope.dataSource
});
countByOperator.render();
});
});
});
This is my html code here:
<div style="border:1px solid #161616; margin:25px 0;" >
<div class="alBarHead">CALL COUNT BY OPERATORS</div>
<div id="countByOperator" ng-controller="countByOperator" ng-init="" ng- model="dataSource"></div>
</div>
Considering the fact that you are using fusioncharts angular-js plugin, there is no need to do this
FusionCharts.ready(function(){
var countByOperator=new FusionCharts({
type:'bar2d',
renderAt:'countByOperator',
width:'450',
dataFormat:'json',
dataSource:$scope.dataSource
});
countByOperator.render();
});
If you change the model by doing $scope.dataSource=response.data; simply, angularjs (and in turn fusioncharts) update the view automatically. Thats the whole point of using it.
And your html would be as simple as
<fusioncharts
width="60"
height="400"
type="column2d"
datasource="{{myDataSource}}"
></fusioncharts>
inside a controller.
If you are not using the plugin
Change the html to
<div ng-controller="countByOperator">
<div id="countByOperator"></div>
</div>
This should work.
I have below div (class name 'sp') which I would like to dynamically create based on the sk from a dataset object.
div code
<div style="" class="swindow">
<div class="sp" style="">
<div class="svis" style="">
<div style="height:95%;width:95%;margin-top:0px;margin-left:5px;">
<chart dsn="dyndata" editable="false" labelled="true"></chart>
</div>
</div>
<div class="sdata" style="">
<div class="stext" style="">Average:78% </div>
</div>
</div>
While searching for similar examples, I came across ng-repeat in Angular js and I thought it might suit for this kind of objective.
But am very new to Angular js and not sure how to assign the data to my dyndata variable dynamically and create new div (class=sp) for each of the given id.
Here is the lookup object
[
{"id":20,"st":[{"label":"Audi","value":10},{"label":"BMW","value":70}]},
{"id":26,"st":[{"label":"Benz","value":40},{"label":"BMW","value":20}]},
{"id":12,"st":[{"label":"AUDI","value":60},{"label":"Tesla","value":70}]},
{"id":57,"st":[{"label":"MZ","value":30},{"label":"Honda","value":40}]}
]
When I input the id's as a set [12,26,57] - Three divs (each for #sp) should get created one for each of ids. In those, each div should have the dyndata assigned with the respective 'st' from above javascript object.
I could create div's in jquery using .append function to the container (#swindow) each time when I need. But am not sure how to assign sk as input to dyndata dataset for each div that gets created.
Could you please share how this can be achieved using Angular js ?
Here is the angular js code I used -
<script>
var app = angular.module('ExampleApp', ['ui.plot']);
app.controller('PlotCtrl', function ($scope) {
$scope.dyndata={};
});
</script>
I'm not exactly sure what you're trying to do but I think it should look something like this. Here is a plnkr..
Controller:
app.controller('PlotCtrl', function($scope) {
$scope.items = [
{"id":20,"st":[{"label":"Audi","value":10},{"label":"BMW","value":70}]},
{"id":26,"st":[{"label":"Benz","value":40},{"label":"BMW","value":20}]},
{"id":12,"st":[{"label":"AUDI","value":60},{"label":"Tesla","value":70}]},
{"id":57,"st":[{"label":"MZ","value":30},{"label":"Honda","value":40}]}
]
});
HTML:
<body ng-controller="PlotCtrl">
<div style="" class="swindow">
<div class="sp" style="" ng-repeat="item in items">
<div class="svis" style="">
<strong>{{item.id}}:</strong>
<div>-{{item.st[0].label}}</div>
<div>-{{item.st[1].label}}</div>
<div style="height:95%;width:95%;margin-top:0px;margin-left:5px;">
<chart dsn="dyndata" editable="false" labelled="true"></chart>
</div>
</div>
<div class="sdata" style="">
<div class="stext" style="">Average:78% </div>
<br>
</div>
</div>
</div>
</body>
I am using nodejs + Angular and html as a froentend
Here is my HTML Code
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
and my angular code is here
app.controller('two_way_control',function($scope,$http,$interval){
load_pictures();
$interval(function(){
load_pictures();
},300);
function load_pictures(){
$http.get('http://localhost:3000/load').success(function(data){
$scope.profile_pictures=data;
});
};
});
and my server code is
app.get('/load',function(req,res){
connection.query("SELECT * from user_info",function(err,rows){
if(err)
{
console.log("Problem with MySQL"+err);
}
else
{
res.end(JSON.stringify(rows));
}
});
});
Which is working fine..
When i entered a new record in **user_info*. it will display new record to me.
Is this right way to do two way data binding or i am missing something
Please help.
Thanks
It looks as if you're doing one way binding because your angular code is never modifying the profiles pictures in the table (meaning you ain't got no form fields, your page is read only). But AFAIK you're doing everything right, as soon as you add editing capabilities to your angular page you would be doing two way binding all the way
YES! Angular '2-way bind' is between scope.variable and VIEW (ng-model in input elements).
In this case, the SRC property of IMG element need to be setd with ng-src!
Because IMG is a html element that load before angular principal scripts.
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img ng-src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
So I followed this guide so I could have a nav bar on every page: http://tomaszdziurko.pl/2013/02/twitter-bootstrap-navbar-angularjs-component/
And it was working, until I created a separate controller to populate my bootstrap carousel. The thing is, my ng-repeat works fine, but when it does I can't see my navbar on that page. I can see it just fine on other pages. I believe this is a scoping issue, but I am not sure where.
This is what I have in the main body of this page:
<body>
<reusable-navbar></reusable-navbar>
<!-- Carousel Start -->
<div id="main-carousel" class="carousel slide container" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--Must set this by hand-->
<div class="item active">
<img alt="" src="../Revamp/Images/carousel/1.jpg">
</div>
<!--Repeat through the rest-->
<div ng-controller="carouselPhotoController">
<div class="item" ng-repeat="source in source">
<img alt="" ng-src="{{source.source}}">
</div>
</div>
</div>
</div>
And my controller looks like this:
var carouselPhotoController=angular.module("revampApp", []);
carouselPhotoController.controller("carouselPhotoController", function($scope, $http){
$http.get('../Revamp/Images/carousel/photos.json').success(function(photos){
//Carousel photos
$scope.source = photos;
})
});
And the directive is identical to the one in that walk through, just with a different template. So how to I get it so my nav bar will show up AND I can use ng-repeat?
Make sure you are not recreating the app.
This creates a new app:
var carouselPhotoController=angular.module("revampApp", []);
But this only accesses an app already created (note the absence of the second parameter):
var carouselPhotoController=angular.module("revampApp");
Change the above line and it should work.