<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.
Related
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.
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.
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.
I've got the following markup:
<li ng-repeat="month in months">
<!-- NOTE THAT THIS IS WORKING IN ALL BROWSERS -->
<div class="cm-month-grid" ng-style="{width:{{month.pos.width}}+'px', left:{{month.pos.left}}+'px'}">
<div class="cm-month-title" title="{{month.date.format('DD.MM.YY')}} {{month.pos | json}}">{{month.date.format('MMM.YY')}}</div>
<div class="cm-month-border"></div>
</div>
</li>
that runs fine, but this is not:
<li ng-repeat="unit in units | filter: filter.text">
<div class="cm-periods">
<!-- BUT THIS IS NOT WORKING... WHY....
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}">jalla</div>
</div>-->
<!-- WORKING IN CHROME ONLY -->
<div ng-repeat="period in unit.periods" class="cm-period" style="width:{{period.pos.width}}px; left:{{period.pos.left}}px;" data-period="{{.}}}">
<span>{{period.start.format('DD.MM.YY')}}</span>
</div>
<!-- -->
</div>
</li>
Full example could be seen here: http://plnkr.co/edit/aZsZEM?p=preview
I know there are issues with style and IE, that's why I'm using the ngStyle, but it does not update it style (try clicking on the zoom in the full example in IE)
Thanks for any help
Larsi
You are using ng-style with double curly brackets. As far as I know that's not valid in an expression.
Try this:
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}">jalla</div>
</div>
</div>
Hmm, still looks messy to me. But, HEY! it zooms! (in FF)
Uh, forgot: Forked Plunk
I am creating a list using ng-repeat something like this
<div ng-repeat="file in files">
{{file.name}}
</div>
But for the last element alone I would like to have a class (<div class="last">test</div>) included to it. how can i achieve this using ng-repeat?
You can use $last variable within ng-repeat directive. Take a look at doc.
You can do it like this:
<div ng-repeat="file in files" ng-class="computeCssClass($last)">
{{file.name}}
</div>
Where computeCssClass is function of controller which takes sole argument and returns 'last' or null.
Or
<div ng-repeat="file in files" ng-class="{'last':$last}">
{{file.name}}
</div>
It's easier and cleaner to do it with CSS.
HTML:
<div ng-repeat="file in files" class="file">
{{ file.name }}
</div>
CSS:
.file:last-of-type {
color: #800;
}
The :last-of-type selector is currently supported by 98% of browsers
To elaborate on Paul's answer, this is the controller logic that coincides with the template code.
// HTML
<div class="row" ng-repeat="thing in things">
<div class="well" ng-class="isLast($last)">
<p>Data-driven {{thing.name}}</p>
</div>
</div>
// CSS
.last { /* Desired Styles */}
// Controller
$scope.isLast = function(check) {
var cssClass = check ? 'last' : null;
return cssClass;
};
Its also worth noting that you really should avoid this solution if possible. By nature CSS can handle this, making a JS-based solution is unnecessary and non-performant. Unfortunately if you need to support IE8> this solution won't work for you (see MDN support docs).
CSS-Only Solution
// Using the above example syntax
.row:last-of-type { /* Desired Style */ }
<div ng-repeat="file in files" ng-class="!$last ? 'class-for-last' : 'other'">
{{file.name}}
</div>
That works for me! Good luck!
You could use limitTo filter with -1 for find the last element
Example :
<div ng-repeat="friend in friends | limitTo: -1">
{{friend.name}}
</div>
The answer given by Fabian Perez worked for me, with a little change
Edited html is here:
<div ng-repeat="file in files" ng-class="!$last ? 'other' : 'class-for-last'">
{{file.name}}
</div>