I am using ng-map. I want markers with BOUNCE animation like this example. But i have multiple markers & when I click second marker first still BOUNCING.
How can i stop every markers animation except one (which i clicked) ?
Thank you for attention.
The following modified example demonstrates how to animate only a selected marker at a time:
angular.module('myApp', ['ngMap'])
.controller('MarkerAnimationCtrl', function (NgMap) {
var vm = this;
NgMap.getMap().then(function (map) {
vm.map = map;
});
vm.cities = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
vm.toggleBounce = function () {
for (var key in vm.map.markers) {
var mid = parseInt(key);
var m = vm.map.markers[key];
if (mid != this.id) {
if (m.getAnimation() != null) {
m.setAnimation(null);
}
}
else {
m.setAnimation(google.maps.Animation.BOUNCE);
}
}
}
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="myApp" ng-controller="MarkerAnimationCtrl as vm">
<ng-map zoom="4" center="59.339025, 18.065818">
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.toggleBounce()" animation="DROP"
draggable="true">
</marker>
</ng-map>
</div>
Related
In this example the pre defined item not selected by default. Please help to achieve this.
<button ng-click="addRow()">Add Row</button>
<ul>
<li ng-repeat="row in rows">
<select kendo-drop-down-list ng-model="row.selected" ng-init="row.selected = row.choosenItem" ng-options="item.name for item in list | filter:notUsed(row)"></select>
<button ng-click="deleteRow(row)">X</button>
</li>
</ul>
var app = angular.module('plunker', []);
In the data ($scope.rows) item selected in row.choosenItem property. Still the selectbox not filled with choosenItem.
app.controller('MainCtrl', function($scope) {
$scope.list = [{
id: 1,
name: "one"
}, {
id: 2,
name: "Two"
}, {
id: 3,
name: "Three"
}, {
id: 4,
name: "Four"
}, {
id: 5,
name: "Five"
}, {
id: 6,
name: "Six"
}];
$scope.rows = [{
choosenItem: {
id: 2,
name: "Two"
},
label: "row 1",
selected: 2
}, {
choosenItem: {
id: 4,
name: "Four"
},
label: "row 2",
selected: 4
}];
function byID(member) {
return member.choosenItem.id;
}
$scope.notUsed = function(row) {
return function(item) {
return item.id === row.choosenItem.id || !_.indexBy($scope.rows, byID)[item.id];
}
};
$scope.addRow = function addRow() {
$scope.rows.push({
choosenItem: {},
label: "row "+($scope.rows.length+1),
selected: 0
})
};
$scope.deleteRow = function deleteRow(row) {
};
$scope.onSelectChange = function onSelectChange(row){
row.choosenItem = _.findWhere($scope.list, {'id': parseInt(row.selected)});
};
});
Example code here
Basically, when using ngOptions the syntax is value as text for item in array - so keeping that in mind, define your value:
ng-init="row.selected = row.choosenItem.id" ng-options="item.id as item.name for item in list"
I am using ngMap to display a map with markers on it. I want to redirect the user to a URL, when he clicks a marker. To build this URL, i need a unique id, from the repeat.
I have this;
<marker ng-repeat="position in ctrl.positions" position="{{position.x}}, {{position.y}}" on-click="ctrl.goto(ctrl.id)"></marker>
In my controller i have
vm.clickRedirect = function(pId) {
console.log(pId);
}
I just return the object, and the actual id (ctrl.id). How do i achive this?
To pass object identifier as a parameter via on-click event replace clickRedirect function to:
vm.clickRedirect = function(event,pId) {
console.log(pId);
}
Working example
angular.module('mapApp', ['ngMap'])
.controller('mapCtrl', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
});
$scope.cities = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
$scope.showInfo = function (event,id) {
$scope.selectedCity = $scope.cities.filter(function(c){
return c.id === id;
})[0];
};
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<div>Selected city: {{selectedCity}}</div>
<ng-map zoom="4" center="59.339025, 18.065818">
<marker ng-repeat="c in cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showInfo(c.id)">
</marker>
</ng-map>
</div>
on-click is not an angular expression
you need to use angular expression to evaluate ctrl.id
like this : {{ctrl.id}}
Or did you mean to use ng-click?
In my controller I have this code:
$scope.lists = [{
listName: 'list1'
}, {
listName: 'list2'
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}];
});
The Input from lists cames from a webservice, so the values (list1 and list2) can be different each time i reload the app. I can also more then 2 items in lists.
How can I show the value from $scope[listName] in an ng-repat section in my view?
Thanks for your Help.
Stefan.
You might try something like this:
(function() {
angular.module("myApp", []).controller("controller", ["$scope",
function($scope) {
$scope.lists = [{
listName: "list1"
}, {
listName: "list2"
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}];
$scope.results = $scope[listName];
});
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="controller">
<ul>
<li data-ng-repeat="item in results">{{item.Name}}</li>
</ul>
</div>
</div>
I'm trying to filter results by star rating, these filters are checkboxes. I can't get this to work. I keep getting the error:
Error: input is undefined
This is my code so far:
$scope.ratings = [
{ name:'One Star', value:1, selected: true},
{ name:'Two Stars', value:2, selected: true},
{ name:'Three Stars', value:3, selected: true},
{ name:'Four Stars', value:4, selected: true},
{ name:'Five Stars', value:5, selected: true}
]
.filter('ratingsFilter', function(){
return function(vehicleResults, ratings){
console.log(ratings)
}
})
<label ng-repeat="rating in ratings">
<input name="rating" type="checkbox" value="{{rating.value}}" ng-model="rating"> star rating {{rating.value}}
</label>
When displaying the filtered results:
<div ng-repeat="vehicle in (filteredResults = (vehicleResults | filter: priceFilter | ratingsFilter:rating )) | startFrom:(currentPage - 1)*10 | limitTo:10 " class="results-container">
Can anyone give me some pointers on how to filter these results?
Thank you in advance.
I've created plunk but it's playing tricks on me so here you have codepen
http://codepen.io/maurycyg/pen/RNrxQj
JS
var app = angular.module('ratings', []);
app.controller('MainCtrl', function($scope) {
$scope.ratings = [{
name: 'One Star',
value: 1,
selected: true
}, {
name: 'Two Stars',
value: 2,
selected: true
}, {
name: 'Three Stars',
value: 3,
selected: true
}, {
name: 'Four Stars',
value: 4,
selected: true
}, {
name: 'Five Stars',
value: 5,
selected: true
}]
$scope.vehicles = [{
name: 'One',
rating: 1
}, {
name: 'Two',
rating: 2
}, {
name: 'Three',
rating: 3
}, {
name: 'Four',
rating: 4
}, {
name: 'Five',
rating: 5
}, ]
}).filter('ratingsFilter', function() {
return function(vehicles, ratings) {
filteredResults = []
angular.forEach(vehicles, function(vehicle) {
angular.forEach(ratings, function(rating) {
if (vehicle.rating === rating.value && rating.selected === true) {
filteredResults.push(vehicle)
}
})
})
return filteredResults;
}
})
I think your problem lies at the ratings repeater and not on your filter.
When you are using ng-model directive it takes care of the value binding, you cannot have both interpolated value attribute and ng-model on an input element.
I believe what you whant to achieve is best done if you remove the ng-model completely and instead use the ng-checked directive like so:
var app = angular.module('main', []);
app
.filter('ratingsFilter', function() {
return function(items, includedRatings) {
return items.filter(function (value, index, array) {
return includedRatings.indexOf(value.rating) > -1;
});
};
})
.controller('MainCtrl', function($scope) {
$scope.selectedRatings = [1, 2, 3, 4, 5];
$scope.toggleRating = function (val) {
var array = $scope.selectedRatings;
var isChecked = array.indexOf(val);
if (isChecked > -1) {
for (var i = array.length; i--;) {
if (array[i] === val) {
array.splice(i, 1);
}
}
}
else {
array.push(val);
}
};
$scope.ratings = [
{ name:'One Star', value:1, selected: true},
{ name:'Two Stars', value:2, selected: true},
{ name:'Three Stars', value:3, selected: true},
{ name:'Four Stars', value:4, selected: true},
{ name:'Five Stars', value:5, selected: true}
];
$scope.priceFilter = {};
$scope.vehicleResults = [
{ name:'Porche', rating: 3, price:80000},
{ name:'Ferrari', rating: 1, price:150000},
{ name:'Volvo', rating: 2, price:54000},
{ name:'Batmobile', rating: 5, price:10},
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<label ng-repeat="rating in ratings">
<input name="rating" type="checkbox"
value="{{rating.value}}"
ng-click="$parent.toggleRating(rating.value)"
ng-checked="$parent.selectedRatings.indexOf(rating.value) > -1" />
star rating {{rating.value}}
</label>
<br />
<label>
Price:
<input ng-model="priceFilter['price']" />
</label>
<label>
selected Rating:
{{ selectedRatings }}
</label>
<ul >
<li ng-repeat="vehicle in vehicleResults | filter : priceFilter | ratingsFilter: selectedRatings">
{{vehicle.name}} - {{vehicle.price | currency}} ({{vehicle.rating}} stars)
</li>
</ul>
</div>
i'm trying to do a nice fadeout+fadein transition when the currentVertical changes.
in knockout it was so simple but i can't figure it out here. please help.
the following code displays a UL list which is "bound" to a pricings array in the $scope.currentVertical when an LI element is clicked, the $scope.currentVertical is changed and the UL list updates accordingly. This works fine, but i would like the entire #container div to fade out and fadein when $scope.currentVertical is changed. Please help...
My html:
<body>
<h1>Pricing Poll</h1>
<div ng-controller="VerticalsController">
<div id="container">
<h2>{{currentVertical.title}}</h2>
<ul>
<li ng-repeat="pricing in currentVertical.pricings">
<a ng-click="currentVertical.selectPricing(pricing)">{{pricing.name}}</a>
</li>
</ul>
</div>
</div>
</body>
my javascript:
function VerticalsController($scope) {
$scope.verticals = [
{
title:'internet',
pricings: [
{
name: 'netvision',
monthly: 23
},
{
name: 'hot',
monthly: 33
},
{
name: '012',
monthly: 28
}
]
},
{
title:'cellular',
pricings: [
{
name: 'cellcom',
monthly: 20
},
{
name: 'pelephone',
monthly: 30
},
{
name: 'orange',
monthly: 25
}
]
},
{
title:'banks',
pricings: [
{
name: 'leumi',
monthly: 20
},
{
name: 'poalim',
monthly: 30
},
{
name: 'benleumi',
monthly: 25
}
]
}];
$scope.selected = [
];
$scope.currentIndex = 0;
$scope.currentVertical = $scope.verticals[0];
$scope.selectPricing = function(pricing) {
$scope.selected.push(pricing);
$scope.currentIndex++;
$scope.currentVertical = $scope.verticals[$scope.currentIndex];
};
/*$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};*/
}
You have to use custom or create directives to start advanced DOM manipulation like animations.
Here's a fiddle with the animation you requested, I use the visible variable on scope to trigger fading and the $timeout service to only change the selectedItem when fadeOut, it could be improved to pass a timeout and a callback as a directive option...
Fiddle: http://jsfiddle.net/g/Bs66R/1/
JS:
function VerticalsController($scope, $timeout) {
$scope.verticals = [{
title:'internet',
pricings: [{
name: 'netvision',
monthly: 23
},
{
name: 'hot',
monthly: 33
},
{
name: '012',
monthly: 28
}]
},
{
title:'cellular',
pricings: [{
name: 'cellcom',
monthly: 20
},
{
name: 'pelephone',
monthly: 30
},
{
name: 'orange',
monthly: 25
}]
},
{
title:'banks',
pricings: [{
name: 'leumi',
monthly: 20
},
{
name: 'poalim',
monthly: 30
},
{
name: 'benleumi',
monthly: 25
}]
}];
$scope.selected = [
];
$scope.currentIndex = 0;
$scope.currentVertical = $scope.verticals[0];
$scope.selectPricing = function(pricing) {
$scope.selected.push(pricing);
$scope.currentIndex++;
$scope.visible = false;
$timeout(function(){
$scope.currentVertical = $scope.verticals[$scope.currentIndex];
$scope.visible = true;
}, 1000);
};
$scope.visible = true;
}
var fadeToggleDirective = function() {
return {
link: function(scope, element, attrs) {
scope.$watch(attrs.uiFadeToggle, function(val, oldVal) {
if(val === oldVal) return; // Skip inital call
// console.log('change');
element[val ? 'fadeIn' : 'fadeOut'](1000);
});
}
}
}
angular.module('app', []).controller('VerticalsController', VerticalsController).directive('uiFadeToggle', fadeToggleDirective);
angular.bootstrap(document.body, ['app']); angular.bootstrap(document.body, ['app']);
HTML:
<h1>Pricing Poll</h1>
<div ng-controller="VerticalsController">
<div id="container" ui-fade-toggle="visible">
<h2>{{currentVertical.title}}</h2>
<ul>
<li ng-repeat="pricing in currentVertical.pricings">
<a ng-click="selectPricing(pricing)">{{pricing.name}}</a>
</li>
</ul>
</div>
</div>
I recommend you use the new ngAnimate directive provided in the AngularJS Core.
Read more here