im working on a google map thing where i need to access the setZoom method when clicking on a custom button. The problem is that setZoom() gets undefined. I have loaded all dependencies(the map renders and my $scope.zoom runs). I have tested that. Anyone knows how to do?
html:
<div ng-app="app" ng-controller="MapController">
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-map-control template="../pages/partials/map-controls.html" controller="MapController" position="RIGHT_BOTTOM">
</ui-gmap-map-control>
</ui-gmap-google-map>
</div>
js:
$scope.map = {
center: {
latitude: 67.855800,
longitude: 20.225282
},
zoom: 13,
options: {
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
backgroundColor: '#f2f2f2'
}
};
$scope.zoom = function($event) {
$event.preventDefault();
//the problem is here. $scope.map.setZoom() gets undefined.
$scope.map.setZoom(9);
};
I think you want to call
$scope.map.control.getGMap().setZoom(9);
instead of
$scope.map.setZoom(9);
See the example controller for more info - https://github.com/angular-ui/angular-google-maps/blob/cbd17a3a225dfe543faa124eb295e66db566f27c/example/assets/scripts/controllers/example.js
--- updating example
html:
<div ng-app="app" ng-controller="MapController">
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
options="map.options"
control="map.control>
<ui-gmap-map-control
template="../pages/partials/map-controls.html"
controller="MapController"
position="RIGHT_BOTTOM">
</ui-gmap-map-control>
</ui-gmap-google-map>
</div>
js:
scope.map = {
center: {
latitude: 67.855800,
longitude: 20.225282
},
control: {},
zoom: 13,
options: {
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
backgroundColor: '#f2f2f2'
}
};
$scope.zoom = function($event) {
$event.preventDefault();
//the problem is here. $scope.map.setZoom() gets undefined.
$scope.map.setZoom(9);
};
--- adding example
angular
.module('app', ['uiGmapgoogle-maps'])
.controller('MapController', mapController)
mapController.$inject = ['$scope', 'uiGmapIsReady'];
function mapController($scope, uiGmapIsReady) {
$scope.map = {
center: {
latitude: 67.855800,
longitude: 20.225282
},
control: {},
zoom: 13,
options: {
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
backgroundColor: '#f2f2f2'
}
};
$scope.zoom = function($event) {
$scope.map.control.getGMap().setZoom(9);
};
uiGmapIsReady
.promise()
.then(function (maps) {
// ready to manip map
});
};
html, body, #map_canvas {
height: 200px;
width: 200px;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
<!DOCTYPE html>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<script type='text/javascript' src='script.js'></script>
<div ng-app='app' id='map_canvas' ng-controller='MapController'>
<button ng-click='zoom()'>Set Zoom</button>
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
control="map.control">
</ui-gmap-google-map>
</div>
Related
I am learning angularjs and I came across some behaviour that I can't understand. I render a list of items in ng-repeat, each has a button to remove itself from the $scope's array - this works as expected but once I added a sortable to the list strange things started to happen.
Here is the running example showing the issue:
https://embed.plnkr.co/eQWcxZ7p8CcACfk6Z53X/
In the example - if I move [^] item 4 (Rocket Launcher) to position 1 and use Rocket Launcher's delete [X] button the list gets updated (i.e. item 4 - Rocket Launcher - that was on position 1 is removed) but the other items delete buttons stop working. Basically moving items and deleting them somehow break the bindings (?).
The code:
(function() {
'use strict';
var app = angular.module('myApp', []);
app.controller('myAppController', function($scope) {
$scope.boxes = [];
$scope.removeBoxItem = function(box, item) {
console.log('Removing "' + item.name + '" form box "' + box.name + '"...');
var index = box.items.indexOf(item);
box.items.splice(index, 1);
console.log(box);
};
this.init = function() {
var e;
e = new Box({
name: 'Red box'
});
$scope.boxes.push(e);
e.items.push(new Item({
index: 1,
name: 'Rock'
}));
e.items.push(new Item({
index: 2,
name: 'Scissors'
}));
e.items.push(new Item({
index: 3,
name: 'Paper'
}));
e.items.push(new Item({
index: 4,
name: 'Rocket launcher'
}));
e = new Box({
name: 'Green box'
});
e.items.push(new Item({
index: 1,
name: 'Chuck the Plant'
}));
e.items.push(new Item({
index: 2,
name: 'Hamster'
}));
e.items.push(new Item({
index: 3,
name: 'Tentacle Chow'
}));
$scope.boxes.push(e);
};
this.init();
});
app.directive("sortable", ["$timeout", function($timeout) {
return {
template: '<div class="sortable" ng-transclude></div>',
transclude: true,
scope: {
'handle': '#'
},
link: function(scope, element, attrs) {
$timeout(function() {
//console.log(element)
var sortable = element.find('> div');
console.log(sortable[0]);
scope.sortable = Sortable.create(sortable[0], {
handle: scope.handle || null
});
});
}
};
}]);
}());
function Box(args) {
this.name = args.name || null;
this.items = [];
}
function Item(args) {
this.index = args.index || null;
this.name = args.name || null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<style>
.container {
border: 1px solid #929292;
padding: 5px;
}
.header {
font-size: 1.2rem;
padding: 10px 15px;
background-color: #F5F5F5;
border-bottom: 2px solid #E2E2E2;
}
.body {
background-color: #F2F2F2;
padding: 10px 10px;
margin-bottom: 10px;
}
.body .item {
border: 1px solid #D2D2D2;
padding: 5px;
margin-bottom: 5px;
}
.body .options {
float: right;
}
.body .options .delete {
cursor: pointer;
}
.body .options .handle {
cursor: move;
}
.debug {
margin-top: 20px;
border-top: 1px dotted #929292;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myAppController as appCtrl">
<div class="container">
<div ng-repeat="box in boxes">
<div class="header">{{ box.name }}</div>
<div class="body">
<div data-sortable="" data-handle=".handle">
<div class="item" ng-repeat="item in box.items">
{{item.index }}) {{ item.name }}
<div class="options">
<span ng-click="removeBoxItem(box, item)" class="delete">[X]</span>
<span class="handle">[^]</span>
</div>
</div>
</div>
</div>
</div>
<div class="debug">
<pre>{{ boxes | json }}
</pre>
</div>
</div>
</div>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="Sortable.js#1.6.0" data-semver="1.6.0" src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.js"></script>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
I am confused by this, in my real code things get even more broken - I made a collapsible directive that surrounds the "Boxes" so I can open and manipulate one at a time - in that case moving item 4 to position 1 and deleting it removes all items from the view (but not from the $scope). Than adding new item to the $scope's array causes items to correctly reappear. For now I created simpler version as I guess this is all somehow connected.
I am aware the sortable should set the objects indexes etc but for now I'd like to understand what is happening. I suspect I have some issues with understanding what is going on with scopes (?). Would be grateful for any help.
There was a final problem when the project finished. How to avoid filtering when page loads first time.
For example : Opening page with TV checked ? (ng-checked="true") Other amenities is false. If the visitor lifts the tv checkin, the filter is renewed.
My project : fiddle
angular.module('hotelApp', [])
.controller('ContentControler', function ($scope, $timeout) {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.location_name = "";
$scope.names = [{
prop_Name: 'Location 1',
lat: 43.7000,
long: -79.4000,
amenities: '3'
}, {
prop_Name: 'Location 2',
lat: 40.6700,
long: -73.9400,
amenities: '2'
}, {
prop_Name: 'Location 3',
lat: 41.8819,
long: -87.6278,
amenities: '4'
}, {
prop_Name: 'Location 4',
lat: 34.0500,
long: -118.2500,
amenities: '1, 2'
}, {
prop_Name: 'Location 5',
lat: 36.0800,
long: -115.1522,
amenities: '2, 3'
}];
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.prop_Name
});
marker.content = '<div class="infoWindowContent"><ul>' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</ul></div>';
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < $scope.names.length; i++) {
createMarker($scope.names[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
//PROBLEM FILTER HERE
$scope.am_en = function()
{
x = $(".hosting_amenities input:checkbox:checked").map(function(){return $(this).val();}).get();
$scope.ot_Filter = function (location) {
var shouldBeShown = true;
for (var i = 0; i < x.length; i++) {
if (location.amenities.indexOf(x[i]) === -1) {
shouldBeShown = false;
break;
}
}
return shouldBeShown;
};
}
$scope.$watch('nas',
function (newValue, oldValue) {
for (jdx in $scope.markers) {
$scope.markers[jdx].setMap(null);
}
$scope.markers = [];
for (idx in $scope.nas) {
createMarker($scope.nas[idx]);
}
}, true);
});
#map {
height: 220px;
width: 400px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}
#total_items
{
margin:0px auto;
padding:0px;
text-align:center;
color:#0B173B;
margin-top:50px;
border:2px dashed #013ADF;
font-size:20px;
width:200px;
height:50px;
line-height:50px;
font-weight:bold;
}
#amount
{
color:#DF7401;
font-size:18px;
font-weight:bold;
}
#slider-range
{
margin:0px auto;
padding:0px;
text-align:center;
width:500px;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<div ng-app="hotelApp" ng-controller="ContentControler">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers"></div>
<ul>
<li ng-repeat="x in nas = (names | filter:ot_Filter)">{{ x.prop_Name }}</li>
</ul>
<div class="hosting_amenities">
<h3>Filter:</h3>
<input type="checkbox" name="more_filter[]" value="1" ng-checked="false">WIFI
<input type="checkbox" name="more_filter[]" value="2" ng-checked="true">TV
<input type="checkbox" name="more_filter[]" value="3" ng-checked="false">Cable TV
<input type="checkbox" name="more_filter[]" value="4" ng-checked="false">Klima
<button ng-click="am_en();">Submit</button>
</div>
Currently, you only change the filter once you press the button Submit. However, I recommend you to remove that and place the function ot_Filter outside of the function triggered when you click it. This will make the initial filtering when you load the page possible.
As the next step, I would use ng-model instead of ng-checked:
<input type="checkbox" name="more_filter[]" value="1" ng-model="ot_Checkboxes['wifi']">WIFI
<input type="checkbox" name="more_filter[]" value="2" ng-model="ot_Checkboxes['tv']">TV
<input type="checkbox" name="more_filter[]" value="3" ng-model="ot_Checkboxes['cableTV']">Cable TV
<input type="checkbox" name="more_filter[]" value="4" ng-model="ot_Checkboxes['klima']">Klima
The properties would be initialized in your javascript:
$scope.ot_Checkboxes = {
'wifi': false,
'tv': true,
'cableTV': false,
'klima': false
};
With these changes your code will update your locations automatically. This is a good practice and you can keep a good control of your elements. You will find more information about how to set this properly in this answer
In order for you to see how it looks like, I modified your fiddle here
function percentToPixel(perc) {
return ($(".stepNavContainer").outerWidth() / 100) * parseFloat(perc);
}
var app = angular.module('app', ["ngAnimate"]);
app.controller("appController", function($scope) {
});
app.directive("init-modal", function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.init = function() {
TweenMax.set($("#cursor"), {
x: percentToPixel("0") + "px",
xPercent: -50
});
TweenMax.set($("#joinModalNavStep1"), {
x: percentToPixel("0") + "px",
xPercent: -50
});
TweenMax.set($("#joinModalNavStep2"), {
x: percentToPixel("50") + "px",
xPercent: -50
});
TweenMax.set($("#joinModalNavStep3"), {
x: percentToPixel("100") + "px",
xPercent: -50
});
};
}
};
});
app.directive("step-modal", function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var tlStepNavAnimation = new TimelineMax();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("0") + "px",
xPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("50") + "px",
xPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("100") + "px",
xPercent: -50,
ease: Back.easeInOut
});
scope.play = function() {
tlStepNavAnimation.play();
};
scope.reverse = function() {
tlStepNavAnimation.reverse();
};
}
};
});
html,
body {
overflow: hidden;
}
body {
background-color: white;
margin: 0;
padding: 0;
}
.stepNavContainer {
position: relative;
height: 50px;
width: 50%;
left: 25%;
border: 1px solid red;
}
.circle {
display: block;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
}
#cursor {
display: block;
position: absolute;
width: 50px;
height: 50px;
background: #c32026;
border-radius: 50%;
}
.step {
background: #999999;
}
.btn {
width: 100px;
height: 50px;
border: 1px solid black;
}
<!DOCTYPE html>
<html ng-app="app" ng-controller="appController">
<head>
<title>Title of the document</title>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div init-modal ng-click="init()" id="setupBtn" class="btn">
<span>Setup</span>
</div>
<div step-modal ng-click="reverse()" id="previousBtn" class="btn">
<span>Previous</span>
</div>
<div id="nextBtn" class="btn">
<span step-modal ng-click="play()">Next</span>
</div>
<div init-modal class="stepNavContainer">
<span id="joinModalNavStep1" class="circle step"></span>
<span id="joinModalNavStep2" class="circle step"></span>
<span id="joinModalNavStep3" class="circle step"></span>
<span id="cursor" class="circle"></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
</body>
</html>
So, I have a working JavaScript animation (Greensock) that you can see here http://codepen.io/jstafford/pen/VaLgvK . I am trying to plug this into an AngularJS directive, but I am not even making it inside the directives for Setup (init-modal directive) or Next and Previous (step-modal directive) buttons. 1) Push Setup button to setup the three circles and cursor at their initial positions which triggers the init-modal directive 2) Then the pushing of Next button or Previoius button triggers the step-modal directive to cause the step animation to occur. I am new to AngularJS and I am trying to do this the AngularJS way but really struggling. Any help greatly appreciated.
First, give a camel case name to your directive:
app.directive("initModal", function() {
return {
restrict: 'E',
link: function(){}
}
}
restrict: 'E' => Element: <init-modal></init-modal>
restrict: 'A' => Attribute: <div init-modal></div>
restrict: 'C' => Classname: <div class="init-modal"></div>
Angular's directive documentation
This is my code
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableSorting: false },
{ name: 'company', enableSorting: false }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function() {
var url;
switch(paginationOptions.sort) {
case uiGridConstants.ASC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json';
break;
case uiGridConstants.DESC:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json';
break;
default:
url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
break;
}
$http.get(url)
.success(function (data) {
$scope.gridOptions.totalItems = 100;
var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
$scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
});
};
getPage();
}
]);
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
In the above code pagination is displayed on ui-grid. but i want to display pagination outside the ui-grid and if data is less than 10 disable pagination.
This is my plunker http://plnkr.co/edit/XD06tjcTQsg6YiWpjRsN?p=preview
To use a custom pagination outside the grid, set enablePaginationControls: false in its gridOptions.
$scope.gridOptions = {
data: 'data',
totalItems: $scope.data.length,
paginationPageSize: 10,
enablePaginationControls: false,
paginationCurrentPage: 1,
columnDefs: [
{name: 'name'},
{name: 'car'}
]
}
You can then create your custom pagination directive (or use Bootstrap pagination directive), and bind paginationCurrentPage property to it.
Here is a Plunker with live demo that uses external Bootstrap pagination directive.
I was able to create my own pagination for angular-ui-grid by utilizing the publicApi and gridApi functions
Below is my HTML, and below that is my javascript.
<div>
<button ng-disabled="videoListPaginationOptions.pageNumber === 1"
ng-click="videoListGridApi.pagination.seek(1)"
ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
role="menuitem" type="button" title="Page to first" aria-label="Page to first"
>
<i class="fa fa-step-backward "></i>
</button>
<button
ng-disabled="videoListPaginationOptions.pageNumber === 1"
ng-class="{'cancelCursor':videoListPaginationOptions.pageNumber === 1}"
ng-click="videoListGridApi.pagination.previousPage()"
role="menuitem" type="button" title="Previous Page" aria-label="Previous Page">
<i class="fa fa-play fa-rotate-180 "></i>
</button>
<input ng-model="videoListPaginationOptions.pageNumber"
ng-change="seekPage('videoList',videoListPaginationOptions.pageNumber)"
class="ui-grid-pager-control-input" type="text" width="50px"/> / {{ videoListGridApi.pagination.getTotalPages() }}
<button role="menuitem" type="button" title="Next Page" aria-label="Next Page"
ng-click="videoListGridApi.pagination.nextPage()"
>
<i class="fa fa-play "></i>
</button>
<button
ng-disabled="videoListGridApi.pagination.pageNumber === videoListGridApi.pagination.getTotalPages()"
ng-click="videoListGridApi.pagination.seek(videoListGridApi.pagination.getTotalPages())"
role="menuitem" type="button" title="Page to last" aria-label="Page to last">
<i class="fa fa-step-forward "></i>
</button>
</div>
Please note that I created a scope variable called videoListGridApi, which I populate when I register my grid api on the onRegisterApi event:
scope.videoListGridOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25, 50],
paginationPageSize: 5,
enableFullRowSelection: false,
enableSelectAll: true,
enableRowHeaderSelection: true,
useExternalPagination: true,
columnDefs: videoListColDefs,
onRegisterApi: function (gridApi) {
scope.videoListGridApi = gridApi;
}
}
How I replicated the Icons
In my example, you can see that I use font-awesome icons to replicate the
icons in the ui-grid pagination.
I also added another class called fa-rotate-180 to get a backwards play button:
.fa-rotate-180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
My Seek Page function is as follows:
(By the way, I have multiple tables in different tabs, so ignore the switch statement)
scope.seekPage = function(tab,page){
switch (scope.currentTab) {
case "videoList":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
case "zeroTags":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
case "duplicates":
scope.videoListGridApi.pagination.seek(parseInt(page));
break;
}
}
I hope this helps u!
I am trying to display multiple markers on a map using ui-google-maps library for angular but it is showing only one marker.
<div id="map_canvas" ng-controller="mainCtrl">
<h1 align="center">Maps</h1>
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-markers models="rmarkers" coords="'self'" fit='true' icon="'icon'">
</ui-map-markers>
</ui-gmap-google-map>
</div>
<script>
angular.module('main', ['google-maps'.ns()])
.controller('mainCtrl', function($scope,$http) {
$scope.map = {center: {latitude: 42.3349940452867, longitude: -71.0353168884369 }, zoom: 14 };
//$scope.marker={id: 1, coords: {latitude: 42.3349940452867, longitude: -71.0353168884369 }};
$scope.options = {scrollwheel: false};
$scope.rmarkers=[{id: 101, latitude: 42.3349940452867, longitude: -71.0353168884369},
{id: 102,latitide: 42.35114190333,longitude: -71.0662789402048},
{id: 103,latitide: 43.35114190333,longitude: -72.0662789402048},
{id: 104,latitide: 44.35114190333,longitude: -73.0662789402048}];});
if by 'ui-google-maps library for angular' you mean
https://github.com/angular-ui/angular-google-maps
then this shows multiple markers on a map, adapting dome of your code to show running in a fiddle
http://jsfiddle.net/nigeljvm/duabubeo/9/
html layer
<div ng-app="main" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-marker ng-repeat="m in map.markersr"
coords="m" icon="m.icon" idkey="m.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
javascript layer
angular.module('main', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function ($scope) {
angular.extend($scope, {
map: {
center: {
latitude: 42.3349940452867,
longitude:-71.0353168884369
},
zoom: 11,
markersr: [
{
id: 101,
latitude: 42.3349940452867,
longitude:-71.0363168884369
},
{
id: 102,
latitude: 42.3563941755867,
longitude:-71.0466168884469
}, {
id: 103,
latitude: 42.3753940755867,
longitude:-71.0853168884369
}, {
id: 104,
latitude: 42.3684940856867,
longitude:-71.1273168884369
}],
dynamicMarkers: []
}
});
});
css .angular-google-map-container { height: 400px; }
based on the angular-ui source
https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/issue-74-markers-events.js
You have a typo. Replace "Latitide" with "latitude"