I am trying to get list of location with their photos using google places api.
I am storing the response in a variable vm.locationList. In my view I am iterating over this variable to show location list.
Following is the code
<div ng-repeat = "(key, value) in vm.locationList">
<div class="panel panel-primary">
<div class="panel-body">
<div class="col-md-2">
<div class="pull-left thumbnail">
<span ng-if="vm.getPhotos">
<img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY" class="img-responsive" style="margin-right:10px;">
</span>
</div>
</div>
<div class="col-md-10">
<h4><b>{{value.name}}</b></h4>
<p><i class="fa fa-map-marker" style="color:red"></i> {{value.vicinity}}</p>
<p> open now: {{value.opening_hours.open_now}}</p>
</div>
<div ng-repeat = "type in value.types">
<p style="float:left;width:20%" class="tags">{{type}}<p>
</div>
</div>
</div>
Now to get the photo I place http url request in src attribute of img tag. Though I am getting pics with the list but I see error in console saying bad request.
Following is the error I am getting in console
GET https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY 400 ()
And here is the http response
<title>Error 400 (Bad Request)!!1</title>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>400.</b> <ins>That’s an error.</ins>
<p>Your client has issued a malformed or illegal request. <ins>That’s all we know.</ins>
Okay I have got where I was doing mistake. I used Angular's ng-src in place of src attribute. Now its working fine. Binding was not working earlier. I got confused because even though binding was not working image was appearing.
Related
<div ng-repeat="file in files" class="record-row">
<div class="colCell fileAttributes">
<div ng-if="!(file.thumbnail === '')" class="collCell-container thumbnail-container">
<img class="" ng-src="{{ file.thumbnail }}" />
</div>
<div class="collCell-container name-container">
<a class="name-container--filename">
<span ng-click="getFile(file.id,file.extension,file.fileName)">{{ file.fileName }}</span>
</a>
<div class="name-container--fileweight">
<span>{{ file.fileSizeByte }}</span>
</div>
</div>
</div>
</div>
Angular Version is 1.3.14. The Code worked fine (functions worked and all outputs) until I added ng-src="{{ file.thumbnail }}".
This gives me the error Unknown provider: urlattrFilterProvider <- urlattrFilter
. Even outputting {{ file.thumbnail }} as text outside of the attribute works fine.
Is this way not correct for setting the src of an image?
Just use src="{{file.thumbnail}}"
instead of ng-src="{{file.thumbnail}}"
Not an actual answer but might be helpful:
the Unknown provider:... error usually shows up when we are injecting something to an angular module the wrong way, eiher a mispelled dependency or a dependency injected in the wrong order.
Make sure the error is coming where you're expecting it from, you can just set a breakpoint on exceptions and confirm this.
I use Grapesjs editor. And now I know only 1 way to store the content.
The situation is the following:
I have Grapesjs block 'About us' which I populate with child cards components. And then I get the content with editor.getHtml() and I may get something like this:
<section class="sect-home-about">
<div class="container">
<div class="title-sect"><h2>Über uns</h2></div>
<div class="about-wrap">
<div class="about-line" id="i94s">
<div class="about-itm">
<div class="about-itm-inner">
<a href="#" class="about-itm-photo"><span class="img-inner-box" id="im8d1">
<img src="/css/img/square.png" alt="base"/>
<img src="/img/about/1.png" alt="" title="" class="main-img"/></span></a>
<div class="about-itm-txt">
<div class="about-itm-name">Andrea</div>
<div class="about-itm-brief">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien
und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie mehr lesen
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And this I can save to DB and then show on front-end. But I don't want to store useless html. Here the editable items should be .title-sect, .about-itm-name, .about-itm-bries and image data. I would like to store only json data and then display it on front-end with correct html, because html is the same and I know it..
Is there such a solution ?
After your GrapesJS is initialized, inside your event add the following code for getting the JSON data output.
JSON.stringify(editor.getComponents())
Here, Component overrides the toJSON function, hence this works.
I have not found any tutorials out there that address how to "properly" create a 404 page in this specific version of Laravel 5.6. I found some outdated once that is a bit different that how Laravel 5.6 works. Any inputs will help.
I found the answer by reading the Laravel Docs "Custom HTTP Error Pages".
Create a "Errors" Folder under "/resources/views/" and create a file named "404.blade.php" then add this code:
#extends('../layouts.app')
#section('content')
<div id="login-container" class="container-fluid" style="background-color: lightgray;">
<div class="row">
<div class="col-md-12 mt-1 mb-1 text-center">
<h1>{{ $exception->getMessage() }}</h1>
back to home
</div>
</div>
</div>
#endsection
then add this route to your "web.php" file:
// 404 Route Handler
Route::any('{url_param}', function() {
abort(404, '404 Error. Page not found!');
})->where('url_param', '.*');
I have written a blog about it: click here
I have an array of comments. For each of the comment, I have a hidden form where you can reply. That item in each object of the array is called: comment.showSubCommentForm. When I click on Reply, I want to be able to reply with a comment and the function called: commentOnSubPost.
I load my data in chunks of 10 (lazy loading) which I am doing by using the infinite-scroll-distance Angular module. Every time I reach the end of the page, I get the next 10 items and add them to the $scope.comments array, which you can see below is what I am running my ng-repeat on .
The problem is that, although the commentOnSubPost works really well as in it adds the reply to the comment, I have reload the data so I can get the updated $scope.comments with the new reply. BUT - as I have implemented lazy loading, how do I do that if say I am on the 20th page?
I looked at some similar posts but their approach from mine was very different so am very lost.
My HTML:
<div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
<div class="row">
<div ng-repeat="comment in comments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="#">SomeLink</a>
<div>
<p >{{ comment.date }} <a ng-href="/wall#/profile/main/{{ comment.userID }}">{{ comment.fullname }}</a> says <i class="commentReply"><a href ng-click="comment.showSubCommentForm = !comment.showSubCommentForm"><small>Reply</small></a></i></p>
<p class="mainComment">
{{ comment.comment }}
<p class="meta"><i class="showReply"><a href ng-click="comment.showReplies = !comment.showReplies"><small>Show Replies</small></a></i></p>
</p>
</div>
<div ng-show="comment.showSubCommentForm">
<form ng-submit="commentOnSubPost( post._id, comment._id, subComment)">
<div class="form-group">
<div class="form-group">
<textarea ng-model="subComment" class="form-control" placeholder="Reply to the above comment"></textarea>
</div>
<input type="submit" value="Reply">
</div>
</form>
<div ng-show="comment.showReplies" ng-repeat="subComment in comment.subComments track by $index">
<ul class="comments">
<li class="clearfix">
<a ng-href="/wall#/profile/main/{{ comment.userID }}"><img ng-src="{{ subComment.profilePic }}" class="avatar" style="border-radius: 50%"></a>
<div class="post-subComments">
<p class="meta">{{ subComment.date }}<a ng-href="SomeLink"> {{ subComment.fullname }}</a></p>
<p>
{{ subComment.comment }}
</p>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
I won't add too much information here as I don't want to overload this post but if you need any particular information, please do let me know. I just need to know how do I reload the data (or not if there's another approach) so that I can get the latest data.
I hope this makes sense.
Thanks in advance!
Like you have $scope.comments = []; then on each call you just have to append upcoming data to this array.
Like $scope.comments = $scope.comments.concat(response.data);
In this way lazy loading will work.
I fixed this with making a Node route which gives back the exact comment I have just added. Then, I found that commentID in my $scope.comments and made it's subCommenemts to the one I have locally.
It does the job and the data is real. One drawback is that if at that time, there's another comment, it won't show up until the page's refreshed but I'm not too fussed about that.
i am using go-lang with angular to build a car view in this approach:
this is my main.go
router.GET("/shopping", carBaseController.CarsViewIndex)
router.GET("/images", galleryBaseController.GetImages)
in my controller\cars.go
func (controller CarController) CarsViewIndex(c *gin.Context) {
c.HTML(http.StatusOK, "carview.html", gin.H{
"title": "Car Page"})
}
func (controller GalleryController) GetImages(c *gin.Context) {
imageList := controller.galleryService.FindImages(&bson.M{})
c.JSON(http.StatusOK, &imageList)
fmt.Println(imageList)
}
in my carview.html
<div class="row mix-grid" ng-init="GetAllImages()" >
<div class="col-md-3 mix photography" ng-repeat="image in allimages">
<div class="hover-effect" >
<div class="img" ><img src="imagesT/gallery/Thumb/{{image.imagename}}" alt=""
class="img-responsive"/></div>
<div class="info"><h3>Manage Images</h3><a href="#"
class="mix-link"><i
class="glyphicon glyphicon-link"></i></a><a
href="imagesT/gallery/{{image.imagename}}" data-lightbox="image-1"
data-title="Image 1" class="mix-zoom"><i
class="glyphicon glyphicon-search"></i></a></div>
</div>
this is the site fo cars
<a class="btn btn-default" href="carinfo">Learn More
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
when i enter http://localhost:3030/shopping every thing work fine but i found this error
"NetworkError: 404 Not Found -
http://localhost:3030/imagesT/gallery/Thumb/%7B%7Bimage.imagename%7D%7D"
i do not know why this error happen while every thing work fine and this what i fount with firbug :
<img class="img-responsive" alt="" src="imagesT/gallery/Thumb/2016-chevrolet-cruze-spied-completely-uncovered-news-car-and-driver-photo-658949-s-217x132.jpg">
Have you tried with ng-src instead of src ?
If you use ng-src instead of src in your img tag, you can resolve this issue.
Using Angular markup like {{hash}} in a src attribute doesn't work
right: The browser will fetch from the URL with the literal text
{{hash}} until Angular replaces the expression inside {{hash}}. The
ngSrc directive solves this problem.
Check out the docs here.