I'm using NgMaps in my Angular app
I'm trying to give the center point dynamically, but it's taking some other points which is not given by me:
HTML:
<ng-map zoom="5" center="{{center}}" style="height:600px">
</ng-map>
In controller:
$scope.center =[18.9750, 72.8258];
Here's the Plnkr Code:
http://plnkr.co/edit/hbNZdSKuUZqVSsJN7he3?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css">
<!-- JS -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.4.7/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ng-map zoom="8" center="{{center}}" style="height:600px">
<!-- <ng-map zoom="5" center="[20.1450107,77.8764691]" style="height:600px"> -->
<custom-control id="home" position="TOP_RIGHT" index="1000">
<div style="background-color: rgba(0,0,0,.5); color:#fff;width:200px;padding: 10px;" ng-if="customMarkers[0].clustors">
<table class="table table-condensed">
<thead>
<tr>
<th style="width: 50%">Priority</th>
<th style="width: 50%">Color</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in customMarkers[0].clustors">
<td>Priority {{$index}}</td>
<td class="{{clustorcolors[$index]}}"></td>
</tr>
</tbody>
</table>
</div>
</custom-control>
<div ng-repeat="(key, value) in customMarkers[0].clustors">
<div ng-repeat="point in value">
<custom-marker position="{{point.coordinate}}" on-mouseover="clustormouseover()" on-mouseout="clustormouseout()">
<div class="mappointer {{clustorcolors[$parent.$index]}}" ng-click="clickme(key,$index)">
<div class="infobox" id="clustor_{{$parent.$index}}_{{$index}}" ng-show="point.visibility">
BM_M_EXECTIVE : {{point.BM_M_EXECTIVE}},<br>
BM_PROFIT : {{point.BM_PROFIT}},<br>
BM_QUANTITY : {{point.BM_QUANTITY}},<br>
BM_NAME : {{point.BM_NAME}},<br>
BM_DISTRICT : {{point.BM_DISTRICT}},<br>
BM_TOTALPURCHASE : {{point.BM_TOTALPURCHASE}},<br>
</div>
</div>
</custom-marker>
</div>
</div>
</ng-map>
</body>
</html>
I don't know your case, but it seems working fine with me with the following example.
http://plnkr.co/edit/cec5b88WpZcoiSd1Mq28?p=preview
javascript
vm.center = "37.7699298, -122.4469157";
vm.setCenter = function() {
vm.center = "38.7699298, -123.4469157";
}
});
html
center: {{vm.center}}<br/>
<button ng-click="vm.setCenter()">Set Center to "38.7699298, -123.4469157"</button>
</div>
I had the same problem, because ngMap does not recognize the $interpolateProvider (according to #allenhwkim). Solution:
HTML:
<ng-map id="map" zoom="5" style="height:600px"></ng-map>
Javascript:
var that = this;
NgMap.getMap('map').then(function(map) {
that.map = map;
that.map.setCenter(new google.maps.LatLng(18.9750, 72.8258));
});
I hope, it helps someone. Thanks #allenhwkim for ngMap!
Related
i am trying to implement searching concept using filter Filter, I'm getting this error and I'm unable to sort this error even I've gone through so many articles and solutions, none suites best for this ... please help !!!!
here is the code.....>
<!doctype html>
<html>
<head>
<style>
#span1{
border:2px dashed blue;
background-color:lime;
padding:0px;
margin-left:5px;
}
hr{
padding:0px;
margin:0px;
background-color:red;
height:5px;
}
h1{
border:2px solid lime;
background-color:orange;;
color:yellow;
padding:0px;
margin:0px;
position:relative;
width:100%;
float:left;
}
h1:first-line
{
color:green
}
</style>
</head>
<body ng-app="myApp" >
<h1><span id="span1">5-11-2016</span> ... Angular JS Filters implemented in Searching.</h1><br><br>
<hr>
<div ng-controller="myAppController">
Student Name : <input ng-model="searchobj.sname"/>
<br>
Select course : <select ng-model="searchobj.course">
<option>angular js</option>
<option>html</option>
<option>css</option>
<option>java script</option>
<option>jQuery</option>
<option>Bootstrap</option>
</select>
<br>
<br>
<br>
<table border="2">
<tr>
<th>Student Name</th>
<th>Course</th>
</tr>
<tr ng-repeat="item in students | filter : searchobj">
<td>{{item.sname}}</td>
<td>{{item.course}}</td>
</tr>
</table>
</div>
<script scr="angular.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myAppController",
function($scope){
$scope.searchobj={sname:" ",course:" "};
$scope.students=[
{sname:"scott",course:"html"},
{sname:"rock",course:"css"},
{sname:"umar",course:"jQuery"},
{sname:"asad",course:"angular js"},
{sname:"nayeem",course:"html"},
{sname:"onida",course:"html"},
{sname:"shakes",course:"java script"},
{sname:"rony",course:"html"},
{sname:"rock",course:"Html"},
{sname:"asif",course:"css"},
{sname:"onida",course:"java script"},
{sname:"sammy",course:"Html"},
{sname:"huber",course:"angular js"},
{sname:"watson",course:"Html"},
{sname:"azzy",course:"Html"},
{sname:"katy",course:"bootstrap"},
{sname:"randy",course:"css"},
{sname:"sammy",course:"html"},
{sname:"jaab",course:"angular js"},
{sname:"randy",course:"html"},
{sname:"peter",course:"css"}];
});
</script>
</body>
</html>
Change <script scr="angular.js"></script> to <script src="angular.js"></script>
Change========^ -----------------------------------------------------^
<html>
<head>
<script src="angular.js"></script>
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',['$scope',function($scope){
$scope.tableData = ['hello','blue','angular'];
//set ture ok but only first time
//设置 true 可以 但是 只有第一次可以
//$scope.selectClass = true;
$scope.reset = function(){
console.log('reset');
$scope.selectClass = false;
}
}]).directive('myTd',function(){
return {
restrict : 'A',
link : function(scope,elem){
$(elem).on('click',function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected')
}else{
$(this).addClass('selected');
}
})
}
}
});
.selected {background: #139029;}
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.selected {background: #139029;}
</style>
</head>
<body ng-controller="myCtrl">
<div class="container-fluid">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in [1,2,3]">
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" my-td >{{item}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger btn-block" ng-click="reset();">重置表格</button>
</div>
</body>
<script src="lib/angular.1.5.5.min.js"></script>
<script src="lib/jquery.2.2.2.min.js"></script>
<script src="src/resetTable.js"></script>
</html>
i click button reset class not work, why? who can tell me. thanks very much!!
You don't need that directive (and you don't need to manipulate the DOM yorself). ng-class is itself a built-in directive that does just that.
Just delete your myTd directive and change your element to this:
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" ng-click="selectClass = !selectClass" >{{item}}</td>
Actually what you want to do to achieve your requirement by preserving the directive is to remove the class selected from your table rows
To do that modify the reset function as follows
$scope.reset = function(){
$('.selected').removeClass('selected');
}
This function selects all the elements with class name selected and will remove the class from those elements
I have an angular directive that loads all the countries in the world into an md-select. My page can have a lot of these countries selects.
My problem is that, when I have a lot of these directives on the page, the page slows down to and freezes. This is due to the directives being loaded.
As the directive will not change once its been made, I was wondering whether there was a way of caching the compiled output such that directive acts almost like a static control?
I am attempting to create a demo of this here: http://plnkr.co/edit/1ivHtxQ0bGnnvqy4usrj
var app = angular.module('plunker', [])
.controller('MainCtrl', function($scope) {
$scope.rows = _.range(50);
$scope.columns = _.range(8)
})
.directive('myCellDirective', function($compile){
var compiled = $compile('<span>{{row}}*{{column}}={{row*column}}</span>');
return {
link:function(scope,element,attrs){
compiled(scope,function(clonedElement){
element.append(clonedElement)
});
}
}
})
.directive('listCountry', function() {
var countries = [240];
for (i=0; i<240; i++) {
countries[i] = i;
}
return {
template: `template starts here
<br /><md-select ng-model="countryToSelect">
<md-option ng-repeat="item in countries"
value="{{item}}">{{item}}</md-option>
</md-select>
<br />template ends here`
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.css"></style>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script data-require="lodash.js#2.4.1" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div list-country></div>
<div list-country></div>
<div list-country></div>
<div list-country></div>
<div list-country></div>
<div list-country></div>
<div list-country></div>
<div list-country></div>
<div list-country></div>
<div list-country></div>
<table>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columns">
<div my-cell-directive></div>
</td>
</tr>
</table>
</body>
</html>
Question: why isn't bootstrap like tooptips working when using it with angular ng-repeat and angular $interval
Behavior I'm seeing: when using bootstrap tooltips with angular ng-repeat and angular $interval, i am seeing the regular tooltips, not bootstrap like tooltips.
What i've tried:
if i use bootstrap tooltips with ng-repeat but disable the $interval, bootstrap tooltip works.
if i use bootstrap tooltips with $interval but remove ng-repeat, bootstrap tooltip works.
in the plunkr i've provided, lines 32, 33, you can disable/enable $interval for testing
http://plnkr.co/edit/6rUeJGsYfkgWMRrZoIYw?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip({container: 'body', placement: 'bottom'}); // initialize bootstrap tooltips
});
var app = angular.module("test", []);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
//$scope.getTestInfo(); // if dont use interval, bootstrap tooltip works
$interval(function(){$scope.getTestInfo();}, 1000); // if use interval, bootstrap tooltip doesnt work
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td data-toggle="tooltip" title="{{count}}">{{stat.name}}</td>
<td data-toggle="tooltip" title="testcolumn2">{{stat.stat1 + count}}</td>
<td data-toggle="tooltip" title="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You can use AngularUI tooltip which does all the work for you. Then your markup would look like this:
...
<tr ng-repeat="stat in stats" style="position: relative">
<td tooltip="{{count}}" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.name}}</td>
<td tooltip="testcolumn2" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.stat1 + count}}</td>
<td tooltip="testcolumn3" tooltip-placement="bottom" tooltip-append-to-body="true">{{stat.stat2}}</td>
</tr>
...
See updated plunker.
I want to show a pop up with values from docDetails on hover of on of the item.
looking at something like
<div ng-repeat="row in docDetails">
<div ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" class="col-sm-2">
{{row.DocumentTypeName}}
<span class="??" style="white-space: normal;" ng-show="hoverEdit">
{{row.DocumentUploadedBy}}
</span>
hoverEdit set to true/false in hoverIn() and hoverOut() method.
I am looking at two things
On hover , i want to show a mouse hand, and display a small pop up with content {{row.DocumentUploadedBy}}
Anything from bootstrap i can readily use? Open to all suggestions.
Thanks
Here is something you can try [Plunker][1]
Please use the link mentioned below
http://plnkr.co/edit/J050zPX5rhLmS2HVBAGy Plunker
or in other terms use something like this mentioned below
script-
var app = angular.module("app",[]);
app.controller('main',["$scope",function($scope){
$scope.docDetails = [
{DocumentTypeName:"Type-1",DocumentUploadedBy:"User-1",ShowInfo:false},
{DocumentTypeName:"Type-2",DocumentUploadedBy:"User-2",ShowInfo:false},
{DocumentTypeName:"Type-3",DocumentUploadedBy:"User-3",ShowInfo:false},
{DocumentTypeName:"Type-4",DocumentUploadedBy:"User-4",ShowInfo:false}
];
}]);
and the HTML as
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<div ng-controller="main">
<div style="border:1px solid black; height:200px;">
{{hoverEdit}}
<div ng-repeat="row in docDetails">
<div style="border:1px solid red; width:200px; height:20px;" ng-mouseover="row.ShowInfo=true" ng-model="hoverEdit" ng-mouseleave="row.ShowInfo=false">
{{row.DocumentTypeName}}
<span style="white-space: normal;" ng-show="row.ShowInfo" > {{row.DocumentUploadedBy}} </span> </div>
</div>
</div>
</div>
</body>
</html>