I am using customer marker in google maps using ng-map.min.js
I am change the position of the custom marker, but it is showing the following error :
Uncaught TypeError: Cannot read property 'lng' of undefined
at a.setPosition (ng-map.min.js:25)
at a.draw (ng-map.min.js:25)
at a.Mz (overlay.js:1)
at js?key=xxx&callback=lazyLoadCallback:138
The code i write for custom marker is :
in html file :
==============
<custom-marker ng-repeat="p in page.watchpath track by $index" position="{{p.Location.position}}">
<div>
<img src="{{p.ImagePath ? page.serviceBasePath + p.ImagePath.substr(2) : page.serviceBasePath + 'Images/avatar.jpg'}}" style="border-radius: 50%; height:40px;width:40px;" />
</div>
</custom-marker>
in js file :
============
page.watchpath[deviceindex] = { position: device.Location.position, ImagePath: imagePath };
But When i am using for marker tag it is not showing any error :
<marker ng-repeat="p in page.watchpath track by $index" position="{{p.position}}"></marker>
When i am using for custom-marker tag it showing error message
How to rectify this error ?
Please help me ...?
What does the following function returns in your code?
device.Location.position
The model which you pass in your view (p.position) should be a one dimension array:
p.position = [0,0]
The first index is 'lat' the second is 'lng.
Related
json array localstorage format
Hello, I'm developing an ionic app. I'm new in Ionic and Typescript.
As you can see in the image below I'm parsing from an API my data in a json array.
On ts file I'm writing this code
`
public categoryDetails:any;
const datacat = JSON.parse(localStorage.getItem('categoryData'));
this.categoryDetails = datacat.categoryData;`
And in my html file when I write this
<h1 class="business-top">Business of the category {{categoryDetails.name}}</h1>
I get the error message "TypeError: Cannot read property 'name' of undefined"
I know that I don't read the attribute "name" correctly. How can I do this one?
Moreover, how can I display Businesses which associate with the spesific term_id of the category?
In this example you need to do that
<h1 class="business-top">Business of the category {{categoryDetails?.name}}</h1>
public categoryDetails: any;
this.categoryDetails = localStorage.getItem('categoryData');
or you can use ionic storage. it is better if you are using ionic.
https://ionicframework.com/docs/storage/
import { Storage } from '#ionic/storage';
export class MyApp {
public categoryDetails: any;
constructor(private storage: Storage) { }
...
// set a key/value
storage.set('categoryData', 'Max');
// Or to get a key/value pair
storage.get('categoryData').then((val) => {
this.categoryDetails = val;
});
}
I finally fingured it out.
#Kilomat thanks for your help and your advice about using ionic storage. That saved me from futured problems.
About my json file that's what I did.
In my HTML code
<ion-grid no-margin>
<h1 class="business-top">Επιχειρήσεις της κατηγορίας {{businessData.name}} {{businessData.term_id}}</h1>
<ion-list>
<ion-item class="col col-50" *ngFor="let c of BusinessCategoryDetails" text-wrap (click)="product(c)">
<div *ngIf="c.term_id == businessData.term_id">
<h2>{{c.post_title}} {{c.term_id}}</h2> <img width="80" height="80" src="{{c.guid}}">
</div>
</ion-item>
</ion-list>
</ion-grid>
And in my TS code
`var businessCategory: categories = navParams.get("businessCategory");
console.log(businessCategory); /exports the Selected category/
var newData = JSON.stringify(businessCategory);
this.businessData = JSON.parse(newData);`
Which takes properties and values from my previous category page. TS code
`categories: [categoryDetails] = null;
gotobusiness(category: categories){
this.navCtrl.push(BusinessPage, { businessCategory: category});
}`
I'm attempting to set the background image for each item in a collection but I'm receiving a syntax error when attempting to access the model attribute. Can anyone help out?
You can assume the collection has been received.
class MyThing extends React.Component {
const collection = this.props.collection;
render () {
return (
<div>
{collection.models.toList().map((model,key) =>
<div className="post" key={model.id}>
<div className="graphic"
style={{background:"url(" + {model.img_url} + ")"}}>
</div>
</div>
)}
</div>
);
}
}
However, I'm receiving the following syntax error which implies I can't use the normal dot notation to access the attribute:
ERROR in ./MyThing.js
Module build failed: SyntaxError: Unexpected token, expected , (55:87)
53 | div className="post" key={model.id}>
> 55 | <div className="graphic" style={{background:"url(" + {model.img_url} + ")"}}></div>
| ^
What's the appropriate way of setting model attributes from a collection like this?
Any thoughts?
Try removing the curly brackets around model.img_url to get this:
<div className="graphic" style={{background:"url(" + model.img_url + ")"}}></div>
https://plnkr.co/edit/bpFi5WuojpNO2rh5vF3T?p=preview
See the README in the Plunker for the following explaination:
I would like the "INJECT NEW" button to create a blank input under
the one that was clicked, not at the end.
The reason they are getting added at the end is because of :
<div ng-repeat="problem in problems track by $index">
The track by $index is breaking the injection.
If I take out the track by $index then I get the error:
https://docs.angularjs.org/error/ngRepeat/dupes?p0=problem%20in%20problems&p1=object:171&p2={%22key%22:null,%22component%22:null,%22$$hashKey%22:%22object:171%22}
How can I have the inject functionality but not get the error?
Can change the method like below and can get it working :
$scope.addMotFault = function(idx) {
if ($scope.problems.length > 1) {
// Now more than one item, we need to
// inject the additional one under the clicked item
// this index + 1
problemPrototype.key = idx + 1;
$scope.problems.splice(idx + 1, 0, angular.copy(problemPrototype));
} else {
// Only one item, so just push new problem
// no need to "inject"
problemPrototype.key = 0;
$scope.problems.push(angular.copy(problemPrototype));
}
};
html:
<div ng-repeat="problem in problems" style="border: 1px #ccc solid; margin:5px; padding: 5px">
It would work i believe.
As per your question I am sending you the required answer.
Please find the attached link and go through the code. you will find the solution.
https://plnkr.co/edit/nhqAnD1hSKuIs9HTsT30?p=preview
you can use ng-if in place $first and can check on the basis on length.
<button ng-click="removeMotFault($index)" ng-if="problems.length > 1">REMOVE</button>
I have a service like below
var places = [
{ "city" : "Bangalore","country-name": "India"},
{ "city" : "Mysore","country-name": "India"}
];
this.getCities = function(){
return places;
};
I am calling the getCities in my controller and displaying the data in my html like below.
<li ng-repeat="place in places">
<label>City : {{place.city}}</label>
<label>Country : {{place.country-name}}</label>
</li>
But the country name is coming as 0 and the city is working fine.
Please find the plunker here
Please let me know why it is happening
Rename country-name to countryName. You can't have dashes in your property names and then access them with the dot operator.
If for some reason you're consuming an api that you don't control, you can do this instead:
<label>Country : {{place['country-name']}}</label>
All:
I wonder how can I set a OR operator on a HTML string in Angualar Template, something like:
<div>{{value || <h6>No Header for now.</h6>}}</div>
The logic is if value is a string but not undefined, we show the value text, otherwise we show a error "No Header for Now" wrapped up by <h6>.
I do not know why this expression can not be correctly interpreted?
Thanks
This can be solved with ng-if:
<div ng-if="value">value</div>
<div ng-if="!value"><h6>No Header for now.</h6></div>
You can add specific attributes (e.g. class) and/or directives (e.g. ng-click) on each <div>.
The problem with using a single element is that you have to repeat your condition several times:
<div ng-class="{ value: 'class1', !value: 'class2' }"
ng-click="value ? action1() : action2()"
ng-bind-html="value || html">
</div>
You have to put a string, not an expression: <h6>No Header for now.</h6> is an invalid js expression. '<h6>No Header for now.</h6>' is a string and can be displayed in the {{ }}.
<div>{{value || '<h6>No Header for now.</h6>' }}</div>
or
<div>{{value != null ? value : '<h6>No Header for now.</h6>' }}</div>
I'm convinced the 2nd works.
EDIT:
If you want to add html code in the {{ }}, it is another problem. See AngularJS : Insert HTML into view, the filter 'sanitize' in 2nd answer should help you ( call {{ '<h1>test</h1>' | sanitize }} and it should work.
EDIT 2:
In a js file:
angular.module('yourapp')
.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
In view:
<div>{{value || '<h6>No Header for now.</h6>' | sanitize }}</div>
In dont know if you need 'ngResource' to use $sce, if it doesn't work, you will have to install angular-resource :/