i have a select box for city which has number of cities getting through ng-options. i need to show the map on the website based on city selected in the selectbox.
this is how i am getting city names
// Code goes here
$scope.data = [{
cities: [{
id: 1,
title: 'Mysore'
}, {
id: 2,
title: 'Bangalore'
}, {
id: 3,
title: 'Delhi'
}, {
id: 4,
title: 'Mumbai'
}],
maps: [{
id: 1,
title: 'Zoo',
city_id: 1
}, {
id: 2,
title: 'Palace',
city_id: 1
}, {
id: 3,
title: 'Beach',
city_id: 4
}]
}];
});
Plunker here https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
Can anyone please help me.
Move the coordinates to the $scope:
$scope.coordinates = {
lat: 28.620089858889145,
lng: 77.17483520507812
};
And:
<ng-map zoom="13" center="{{coordinates.lat}},{{coordinates.lng}}" ...
Use ng-change on the select:
ng-change="centerCity(citySelect.selectedOption)"
In the centerCity method you can use the geocoder to retrieve the coordinates by city name. Then you simply need to update the variables.
Simple example:
var geocoder = new google.maps.Geocoder();
$scope.centerCity = function(city) {
geocoder.geocode({
'address': city.title
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$scope.$apply(function() {
$scope.coordinates.lat = results[0].geometry.location.lat();
$scope.coordinates.lng= results[0].geometry.location.lng();
});
} else {
console.log('Error');
}
});
};
Demo: https://plnkr.co/edit/WETs0FL0DbPbDn2A77hq?p=preview
Related
I'm trying to give an array to my makeSlider function.
The HTML5 Data attribute selects the correct array. Unfortunately, it is not interpreted as an array.
It does not work:
values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
Is working:
makeSlider(sliderID, targetID, dataMehrfachauswahlmatrixLeft);
HTML:
<div class="noui-slider" id="slider-1" data-slider="dataMehrfachauswahlmatrixLeft">
<!-- slider here -->
</div>
<div class="hidden-md-up">
<!-- Store selected value -->
<input class="form-control slider-value" id="input-target-1">
</div>
JS (script.js):
$(document).ready(function() {
// slider array
// Matrix 1
var dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
var dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
...
}
// init slider
$(".noui-slider").each(function(index) {
var sliderID = $(this).attr("id"),
targetID = $(this).next().find(".slider-value").attr("id");
values = $(this).data("slider");
makeSlider(sliderID, targetID, values);
});
});
Problem with current implementation it that the variable value doesn't refers to the defined array. Its a string literal having value i.e. dataMehrfachauswahlmatrixLeft, dataMehrfachauswahlmatrixRight
Define the array in window or any other object scope.
// Matrix 1
window.dataMehrfachauswahlmatrixLeft = [...];
// Matrix 2
window.dataMehrfachauswahlmatrixRight = [...]
Then use Bracket notation to access object dynamic properties.
values = $(this).data("slider");
makeSlider(sliderID, targetID, window[values]);
An example here
$(document).ready(function() {
var myOBj = {};
// slider array
// Matrix 1
myOBj.dataMehrfachauswahlmatrixLeft = [{
id: 1,
value: "sehr wichtig"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "unwichtig"
}, {
id: null,
value: "weiß nicht"
}];
// Matrix 2
myOBj.dataMehrfachauswahlmatrixRight = [{
id: 1,
value: "in hohem Maße"
}, {
id: 2,
value: ""
}, {
id: 3,
value: ""
}, {
id: 4,
value: ""
}, {
id: 5,
value: "in geringem Maße"
}, {
id: null,
value: "weiß nicht"
}];
// build slider
var makeSlider = function(sliderID, targetID, values) {
console.log(values)
}
$(".noui-slider").on('click', function() {
var values = $(this).data("slider");
makeSlider(1, 2, myOBj[values]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixLeft'>1</div>
<div class='noui-slider' data-slider='dataMehrfachauswahlmatrixRight'>2</div>
Feel free to tell me to go away (I'm a newbie to angular and javascript), but how would I get started on saving this angularJS to localStorage? Is it something that can be done relatively painlessly by creating a saving function in the add()? I've seen that angular has its own local-storage but can this be done without that? Pen: http://codepen.io/kiddigit/pen/LZVXMV
angular.module('app', []);
angular.module('app').controller("MainController", function(){
var vm = this;
vm.title = 'Movie Database';
vm.searchInput = '';
vm.shows = [
{
title: 'Game of Thrones',
actor: 'Dudes',
year: 2011,
favorite: true
},
{
title: 'Walking Dead',
actor: 'More dudes',
year: 2010,
favorite: false
},
{
title: 'The Goonies',
actor: 'The Coreys',
year: 2002,
favorite: true
},
{
title: 'Firefly',
actor: 'Dunno',
year: 2002,
favorite: false
},
{
title: 'Bullit',
actor: 'McQueen',
year: 2013,
favorite: true
},
];
vm.orders = [
{
id: 1,
title: 'Year Ascending',
key: 'year',
reverse: false
},
{
id: 2,
title: 'Year Descending',
key: 'year',
reverse: true
},
{
id: 3,
title: 'Title Ascending',
key: 'title',
reverse: false
},
{
id: 4,
title: 'Title Descending',
key: 'title',
reverse: true
}
];
vm.order = vm.orders[0];
vm.new = {};
vm.addShow = function() {
vm.shows.push(vm.new);
vm.new = {};
};
});
The browser (the window object) has an object called localStorage, simple as that. If you want to save an object to the local storage you better stringify it first using json.
Example:
// inside your controller:
function saveMovie() {
var selectedMovieString = json.stringify(this.selectedMovie); // for example;
localStorage.setItem("selectedMovie", selectedMovieString);
}
I have one form which has 10 to 12 fields which contains dropdown and multi select drop down. I want before my controller function gets called all the fields should filled up. I tried something like this :
var app = angular.module('app', []);
app.config(function ($provide) {
var transactionType = [
{ id: 0, type: 'card', value: 'card' },
{ id: 1, type: 'cash', value: 'cash' },
{ id: 2, type: 'other', value: 'other' }
];
var friends = [
{ id: 0, name: 'A', value: 'A' },
{ id: 1, name: 'B', value: 'B' },
{ id: 2, name: 'C', value: 'C' },
{ id: 3, name: 'D', value: 'D' }
];
var currency = [
{ id: 0, currency: 'USD', value: 'USD' },
{ id: 0, currency: 'INR', value: 'INR' },
{ id: 0, currency: 'EUR', value: 'EUR' },
];
$provide.value('TransactionType', transactionType);
$provide.value('Friends', friends);
$provide.value('Currency', currency);
});
app.controller('MainCtrl', function ($scope, TransactionType, Friends, Currency) {
});
Is this the right way considering that may be in future I have to use http service to get array from DB and to populate on dropdown list?
I'd use a specific type of provider called a Factory instead. If you use promises in your factory when switch to http services you'd only need to change your factory code - the rest of your application will work without code changes!
angular.module('myApp')
.factory('Friend', function ($q) {
return {
list: function() {
var deferred = $q.defer();
deferred.resolve([
{ id: 0, name: 'A', value: 'A' },
{ id: 1, name: 'B', value: 'B' },
{ id: 2, name: 'C', value: 'C' },
{ id: 3, name: 'D', value: 'D' }
]);
return deferred.promise;
}
};
});
In my application I'm having the bellow problem
SERVER RESPONSE DATA
route /users
{ data: [
{ id: 5, name: 'peter' },
{ id: 10, name: 'adan' }
] }
route /users/5
{ data: { id: 5, name: 'peter' } }
case01
Restangular.one('users', 5).get().then(function(user){
$scope.user = user;
});
case02
Restangular.all('users').getList().then(function(users){
$scope.user = users[0];
});
In my case02 I can access $scope.user.id, but in case01 I have that to do $scope.user.data.id (what's not preferible when I render this in my template with {{ user.id }} where I have that use {{ user.data.id }} )
In my case02 I can change my data and use $scope.user.save(), but in my case01 I can't access this function
In my restangular I configure this for handle data from server when I use getList because it come in one object and not in one Array
RestangularProvider.setResponseInterceptor(function(response, operation, what) {
if (operation === "getList") {
// from:
// {data: [{ id: 1, name: 'peter' }, { id: 2, name: 'adan' }]}
// to:
// [{ id: 1, name: 'peter' }, { id: 2, name: 'adan' }]
return response.data;
}
return response;
});
So I would not work, because then I will have a normal JS object and not a Restangular object, the Restangular object has several methods that I still intend to use the same $scope, so we would like to preserve this.
example:
In an item from a case02 consultation (array) I have an object with methods of Restangular:
all (), allUrl (), one (), oneUrl (), ... and the properties of the object I sought (id, name) within $ scope.user.
{
all: function(){...},
allUrl: function(){...},
one: function(){...},
oneUrl: function(){...},
...
id: data_from_user,
name: data_from_user
}
In an item from a case01 query (object) I have an object with methods of Restangular within $ scope.user and object properties that sought (id, name) within $ scope.user.data.
{
all: function(){...},
allUrl: function(){...},
one: function(){...},
oneUrl: function(){...},
...
data: {
id: data_from_user,
name: data_from_user
}
}
For this reason it would not work the solution you presented because it is okay to work with restangular the subject, not an object of normal JS, but thank you for the answer Tim Castelijns.
if (operation === "getList") {
// from:
// {data: [{ id: 1, name: 'peter' }, { id: 2, name: 'adan' }]}
// to:
// [{ id: 1, name: 'peter' }, { id: 2, name: 'adan' }]
return response.data;
}
return response;
If operation is getList, you return response.data, which is
[
{ id: 5, name: 'peter' },
{ id: 10, name: 'adan' }
]
but if operation is not getList, you return response, which is the entire object, including the data sub-object
{
data: {
id: 5,
name: 'peter'
}
}
Your choice to return different results depending on what operation it is, is the reason you need to do user.data.id for case01, because you assign the result to user with then(function(user), when in fact user represents the entire data sub-object containing the user.
You should be able to solve it by changing to this
Restangular.one('users', 5).get().then(function(response){
$scope.user = response['data'];
});
The objective of this plunk is to query a specific tree node (given its id stored in the variable sk) and show an alert with its text. Enter a number in the input field (the node sk value), click on the button and you should see an alert with the node text.
The get method and hasChildren in the hierarchical data source are not working, any ideas?
HTML:
<div kendo-tree-view k-data-source="treeData"></div>
<br/><br/>
<button ng-click="queryTree()">Get Text</button>
<input ng-model="sk">
Javascript:
function MyCtrl($scope) {
$scope.sk = 3;
$scope.treeData = new kendo.data.HierarchicalDataSource({
data: [
{ sk: 11, text: "Furniture", expanded:true, items: [
{ sk: 2, text: "Tables & Chairs"},
{ sk: 3, text: "Sofas" },
{ sk: 4, text: "Occasional Furniture" }
] },
{ sk: 12, text: "Decor", expanded:true, items: [
{ sk: 6, text: "Bed Linen" },
{ sk: 7, text: "Curtains & Blinds" },
{ sk: 8, text: "Carpets" }
] }
],
schema: {
model: {
id: "sk",
hasChildren: function(item) {
return item.sk > 10;
}
}
}
});
$scope.queryTree = function(){
$scope.treeData.fetch(function() {
var dataItem = $scope.treeData.get($scope.sk);
alert(dataItem.text);
});
};
}
You should access the datasource directly:
$scope.queryTree = function(){
var nodeDataItem = $scope.treeData.get($scope.sk);
alert(nodeDataItem.text)
};
Here is a working plunkr for you. http://plnkr.co/edit/N4FYVh227HjvYOoWMYo4