ng-Map not showing text in info-window - angularjs

I have the following Code:
<ng-map>
<marker ng-repeat="item in items" position="{{item[4]}},{{item[5]}}" name="{{item[1]}}" on-click="showInfoWindow('myInfoWindow')">
<info-window id="myInfoWindow">
<h4>{{this.name}}</h4>
</info-window>
</marker>
</ng-map>
The Problem is that I see the info-window but the text inside h4 is empty and not the content of {{item[1]}}

info-window directive must not be used with ng-repeat, the following example shows how to initialize a single instance of info window for markers:
angular.module('ngMap').controller('MyCtrl', 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.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};
});
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap" ng-controller="MyCtrl">
<ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
<info-window id="myInfoWindow" >
<div ng-non-bindable>
<h4>{{selectedCity.name}}</h4>
</div>
</info-window>
<marker ng-repeat="c in cities"
position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
</marker>
</ng-map>
</div>
JSFiddle

You can do something like this
<ng-map>
<span ng-init="name='Test123'">
<marker ng-repeat="item in items" position="{{item[4]}},{{item[5]}}" name="name" on-click="showInfoWindow('myInfoWindow')"></marker>
<info-window id="myInfoWindow">
<h4>{{name}}</h4>
</info-window>
</span>
</ng-map>

Related

How to make expand and collapse manually child wise in angularjs

I have an accordion expand is working fine but collapse is not working,it should work like accordion,for ex when I click 'title 2' its content should expand and 'title 1' content should collapse.below is my code,I am new to angularjs.Anyone can help me.If its in jquery also fine.
HTML
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
<body ng-app="app">
<h1>Dynamic accordion: nested lists with html markup</h1>
<div ng-controller="AccordionDemoCtrl">
<div>
<div ng-repeat="group in groups">
<div class="parents" ng-click="item=1"><i class="glyphicon-plus"></i> {{ group.title }}
</div>
{{ group.content }}
<ul class="childs" ng-show="item==1">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script src="js/index.js"></script>
index.js
angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
angular.module('app').controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'title 1',
isOpen: true,
list: ['<i>item1a</i> blah blah',
'item2a',
'item3a']
},
{
title: 'title 2',
list: ['item1b',
'<b>item2b </b> blah ',
'item3b']
},
{
title: 'title 3',
},
{
title: 'title 4',
},
{
title: 'title 5',
}
];
});
I suggest you those functions :
$scope.open = function (index) {
$scope.groups[index].isOpen = !$scope.groups[index].isOpen;
$scope.closeOthers(index);
}
$scope.closeOthers = function (index) {
for(var i = 0; i < $scope.groups.length; i++) {
if (i !== index)
$scope.groups[i].isOpen = false;
}
}
open is fired when clicking on a parent, closeOthers is called in open. I init a visible boolean to parents. Each time user clicks on a parent, it set visible to true, and others to false.
<div ng-controller="AccordionDemoCtrl">
<div>
<div ng-repeat="group in groups track by $index">
<div class="parents" ng-click="open($index)"><i ng-class="{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ group.title }}
</div>
{{ group.content }}
<ul class="childs" ng-show="group.isOpen">
<li ng-repeat="item in group.list">
<span ng-bind-html="item"></span>
</li>
</ul>
</div>
</div>
</div>
Working demo

Django template not rendering JSON response when used with AngularJS

EDIT: Solved
views.py
def post_list(request):
queryset = Post.objects.all()
json_data = serializers.serialize('json', queryset)
context = {
"jsondata" : json_data,
}
return render(request,"index.html", context)
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myapp" ng-controller="myctrl">
{{ jsondata }}
<div class="ui icon input">
<input type="text" ng-model="search" placeholder="Search skills...">
<i class="search link icon"></i>
</div>
<div class="ui link cards" style="padding:40px">
<div class="card">
<div class="image">
<img class="ui avatar centered image" src="http://1.semantic-ui.com/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<div class="ui small header" ng-repeat="skill in skills | filter:search">
{{ skill.fields.post_title}}
</div>
<div class="description">
{{ skill.fields.post_content }}
</div>
</div>
</div>
</div>
<script type="text/javascript">
var skills_list = "{{ jsondata }}";
var nice_data = JSON.parse(skills_list.replace(/"/g, '"'))
var very_nice_data = JSON.stringify(nice_data);
console.log(very_nice_data)
</script>
<script>
angular.module('skillboard', []).controller('searchskills', function ($scope) {
$scope.skills = very_nice_data;
});
</script>
</body>
Output of **very_nice_data** in console is:
[
{
"model": "posts.post",
"pk": 1,
"fields": {
"post_title": "Algorithms",
"post_content": "Calling it.",
"updated_on": "2016-06-12T09:09:45.198Z",
"timestamp": "2016-04-20T09:44:21.887Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "http://example.com"
}
},
{
"model": "posts.post",
"pk": 4,
"fields": {
"post_title": "Data Structures",
"post_content": "new content here",
"updated_on": "2016-06-12T09:09:26.359Z",
"timestamp": "2016-04-26T06:28:32.569Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "http://example.com"
}
},
{
"model": "posts.post",
"pk": 11,
"fields": {
"post_title": "Dynamic Programming",
"post_content": "This level of DP is well suited for 2+ yr experience programmers/researchers.",
"updated_on": "2016-06-12T09:09:16.542Z",
"timestamp": "2016-06-12T08:44:25.705Z",
"test_type": "Coding",
"number_of_questions": 0,
"test_url": "#"
}
}
]
I am trying to render JSON response from my django view into my template using angular. I am using semantic cards for each item. JSON response is perfectly fine. ng-repeat is also looping for number of items in the JSON but post_title and post_content is not displaying.
<div class="ui small header" ng-repeat="skill in skills | filter:search">
{{ skill.fields.post_title }}
</div>
<div class="description">
{{ skill.fields.post_content }}
</div>
Where is the bug? Please help.
Don't stringify very-nice_data.
It needs to be a javscript array not a json string when you do $scope.skills = very_nice_data;
What Charlieftl answered is perfect. Instead of var very_nice_data = JSON.stringify(nice_data); just do var very_nice_data = nice_data;
var app = angular.module("skillboard", []);
app.controller("searchskills", function($scope) {
$scope.skills = very_nice_data;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="skillboard" ng-controller="searchskills">
<div class="ui small header" ng-repeat="skill in skills | filter:search">
{{ skill.fields.post_title }}
</div>
</div>
<script type="text/javascript">
var skills_list = '[{"model":"posts.post","pk":1,"fields":{"post_title":"Algorithms","post_content":"Calling it.","updated_on":"2016-06-12T09:09:45.198Z","timestamp":"2016-04-20T09:44:21.887Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com"}},{"model":"posts.post","pk":4,"fields":{"post_title":"Data Structures","post_content":"new content here","updated_on":"2016-06-12T09:09:26.359Z","timestamp":"2016-04-26T06:28:32.569Z","test_type":"Coding","number_of_questions":0,"test_url":"http://example.com"}},{"model":"posts.post","pk":11,"fields":{"post_title":"Dynamic Programming","post_content":"This level of DP is well suited for 2+ yr experience programmers/researchers.","updated_on":"2016-06-12T09:09:16.542Z","timestamp":"2016-06-12T08:44:25.705Z","test_type":"Coding","number_of_questions":0,"test_url":"#"}}]'
var nice_data = JSON.parse(skills_list.replace(/"/g, '"'))
var very_nice_data = nice_data;
</script>
Finally resolve the issue. I encountered to issue below:
There was conflict in the curly braces of django and angular view bindings. So i created custom bindings below.
var app=angular.module('appName', []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});

show multiple info-windows with ng-map in angularjs

I have this code for showing a info-window in google maps . The problem is that it always shows the same data in the info window. For the markers it is no problem to use the $scope.result array.
<div id="allesMap">
<ng-map zoom="9" center="[51.2132822,4.4304089]" >
<marker ng-repeat-start="x in result" position="{{x.point_lat}},{{x.point_lng}}" icon="images/wifi.png" on-click="showInfoWindow('myInfoWindow')">
<info-window id="myInfoWindow">
<div class="infoWindowTekst"> gemeente: {{x.gemeente}}<br>
straat: {{x.straat}} {{x.huisnr}} <br>
</div>
</info-window>
</marker>
<marker ng-repeat-end ></marker>
</ng-map>
</div>
From performance perspective it always a better option to create a single instance of info window and display information depending on the selected marker. The following example demonstrates how to accomplish it:
angular.module('mapApp', ['ngMap'])
.controller('mapController', 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.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};
});
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
<info-window id="myInfoWindow">
<div ng-non-bindable>
<h4>{{selectedCity.name}}</h4>
</div>
</info-window>
<marker ng-repeat="c in cities"
position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
</marker>
</ng-map>
</div>
JSFiddle

Setting different map marker icons based on value of ng-repeat variable

I am trying to add map markers dynamically to the map using ng-repeat inside ng-map as follows,
<div id="map-canvas">
<ng-map default-style="true">
<marker id='ID{{school.id}}' ng-repeat="school in vm.schools" position="{{school.location}}" on-click="vm.showDetail(school)" icon="assets/img/marker-excellent.png">
</marker>
<info-window id="marker-info">
<div ng-non-bindable="">
<h5>{{vm.school.name}}</h5>
</div>
</info-window>
</ng-map>
</div>
Here this creates multiple markers with the same marker icon. I want to use different marker icons based on the value of {{school.rating}}. However I am not able to figure out how to change the marker icon url based on the value of rating while the ng-repeat is in action to render the markers on the map.
Currently, I am doing the following, but I think this is an inefficient method of doing it.
<div id="map-canvas">
<ng-map default-style="true">
<marker id='ID{{school.id}}' ng-if="school.overallRating >= 4.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-excellent.png">
</marker>
<marker id='ID{{school.id}}' ng-if="school.overallRating < 4.5 && school.overallRating >= 3.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-good.png">
</marker>
<marker id='ID{{school.id}}' ng-if="school.overallRating < 3.5 && school.overallRating >= 2.0" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-average.png">
</marker>
<info-window id="marker-info">
<div ng-non-bindable="">
<h5>{{vm.school.name}}</h5>
</div>
</info-window>
</ng-map>
</div>
Here, I have put multiple marker directives each having ng-repeat but different conditions using ng-if
I am wondering if there is a more efficient way to do it using a single marker directive with ng-repeat
You could introduce a function to display marker icon per item (school rating) as demonstrated below.
Working example
var app = angular.module('appMaps', ['ngMap']);
app.controller('mapCtrl', function () {
var vm = this;
vm.schools = [
{ id: 1, name : "Brisbane", location: [-33.867396, 151.206854], overallRating: 3.2 },
{ id: 2, name: "Sydney", location: [-27.46758, 153.027892], overallRating: 4.6 },
{ id: 3, name: "Perth", location: [-31.953159, 115.849915], overallRating: 3.5 }
];
vm.getIcon = function (school) {
var iconsTable = {
2: "http://google.com/mapfiles/ms/micons/green.png",
3: "http://google.com/mapfiles/ms/micons/yellow.png",
4: "http://google.com/mapfiles/ms/micons/orange.png",
5: "http://google.com/mapfiles/ms/micons/red.png",
}
var iconUrl = iconsTable[Math.round(school.overallRating)]
if (iconUrl)
return iconUrl;
return "http://google.com/mapfiles/ms/micons/blue.png";
};
});
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="appMaps" ng-controller="mapCtrl as vm">
<map center="[-24.667856, 133.630694]" zoom="4">
<marker id='ID{{school.id}}' ng-repeat="school in vm.schools" position="{{school.location}}" icon="{{vm.getIcon(school)}}" >
</marker>
</map>
</div>
JSFiddle

updating angular model with bootstrap carousel

i'm working on an angular web app and i'm stuck in a part of it.i'm trying to update an angular model by choosing an item in a bootstrap carousel.i mean that if i select an image from the bootstrap carousel, the image's link will be put in the form used to update the model.is it possible to do it?this is the code i'm trying to make working
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="Interaction_Ctrl">
<form>
<table>
<tr>
<td>Image URL:</td>
<td>
<input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" ng-change='change()' class="form-control" />
</td>
</tr>
<tr>
<td>
<carousel>
<slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image" ng-change='change()'>
<img ng-src="{{slide.image}}" style="height:100px; margin:auto">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</slide >
</carousel>
</td>
</tr>
</table>
</form>
</div>
var mymodule = angular.module("jsonerator", ['ui.bootstrap']);
mymodule.controller("Interaction_Ctrl", function ($scope) {
$scope.slides = [];
$scope.slides.push({
text: 'barnowl',
image: 'http://reelyactive.com/images/barnowl.jpg'
});
$scope.slides.push({
text: 'barnacles',
image: 'http://reelyactive.com/images/barnacles.jpg'
});
$scope.slides.push({
text: 'barterer',
image: 'http://reelyactive.com/images/barterer.jpg'
});
$scope.slides.push({
text: 'chickadee',
image: 'http://reelyactive.com/images/chickadee.jpg'
});
$scope.slides.push({
text: 'starling',
image: 'http://reelyactive.com/images/starling.jpg'
});
function changeKeyValue() {
for(var key in $scope.person) {
if($scope.person.hasOwnProperty(key)) {
if(!$scope.person[key].length) {
delete $scope.person_ld["#graph"][0]["schema:" + key];
}
else {
$scope.person_ld["#graph"][0]["schema:" + key] = $scope.person[key];
}
}
}
}
$scope.change = function() {
changeKeyValue();
}
});
});
If you place the input url element somewhere within the ng-repeat, the input will update as the slides change. Right now the issue is the scope {{slide.image}} is within each <scope> element, so the input does cannot utilize the model attribute.
<carousel>
<slide ng-repeat="slide in slides" active="slide.active" ng-model="person.image">
<input type="url" placeholder="http://reelyactive.com/images/barnowl.jpg" ng-model="person.image" class="form-control" />
<br>
<br>
<img ng-src="{{slide.image}}" style="height:100px; margin:auto">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</slide >
</carousel>
You can adjust CSS or add additional <br/> to separate as needed. Plunker below. Let me know if that helps.
http://plnkr.co/edit/Kd23U1ercuqc2ACpQEZH?p=preview

Resources