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.
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 am working on a small AngularJS application. In one of the views, I have replaced some hard-coded html with data coming from a JSON file that I iterate through:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction('{{item.action}}')">
{{item.name | translate }}
</div>
</div>
The problem is that, since this replacement, the function fired by ng-click, that used to be (hard-coded) ng-click="$ctrl.selectAction('register'); and so on, does not work anymore.
Why does that happen? How can I fix the problem?
You don't need quotes or {{ }} inside ng-click:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction(item.action)">
{{item.name | translate }}
</div>
I need to make use of the ng-repeats in the dirPagination(angular plugin), I have also created the plunker.
I need the current object to have ng-repeat at two different places
1 rating images
2 services offered
Link for plunker
If you refer to the plnkr, there is a ratingImages attribute in each object, what i want is that i need to make use of ng-repeat in side the dir-paginate for example html :
<div class="rating">
<img ng-repeat="ratingImage in provider.ratingImages" src="{{ratingImage }}" alt="" />
<span>(5 reviews)</span>
</div>
But by doing this i receive an error ng-repeat:dupes
Here is how you can do it
<div class="rating">
<!-- ng-repeat = ratingImage in provider.ratingImages -->
<img ng-repeat="ratingImage in provider.ratingImages track by $index" src="{{ratingImage}}" alt="" />
<span>(5 reviews)</span>
</div>
note i use track by $index for dupes
read more about it here
I have the HTML below on my Ionic app:
<a ng-href="#/app/perfil/{{ notification.Notification.model_id }}">
<img ng-src="{{ notification.Notification.photo }}" class="profile-pic">
<h2 ng-bind-html="notification.Notification.name">{{ notification.Notification.name }}</h2>
<p ng-bind-html="notification.Notification.title">{{ notification.Notification.title }}</p>
</a>
As you can see, it set the user ID after loading a JSON file. This link works fine on a browser, but for some reason when I try on a real device, my xcode returns an error:
Failed to load webpage with error: The URL can’t be shown
All my data is being served on a HTTPs URL.
Any idea on how to fix that?
After some research, I've changed my ng-href to ui-sref and it worked - actually, ui-sref makes much more sense in this case.
If any one is having the same issue, please read more details here: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
My code:
<a ui-sref="appPerfil.perfil-amigo({ user_id: notification.Notification.model_id })">
<img ng-src="{{ notification.Notification.photo }}" class="profile-pic">
<h2 ng-bind-html="notification.Notification.name">{{ notification.Notification.name }}</h2>
<p ng-bind-html="notification.Notification.title">{{ notification.Notification.title }}</p>
</a>
I am using metro ui and am trying to use ng-repeat within it to build html within a popup.
My template looks like this. Any thoughts would help. I have verified the data is there, but ng-repeat just doesn't work within double quotes. I've tried using single quotes, but that doesn't work.
Here's my template.
<div class="container">
<div class="title-group six">
<a ng-repeat="product in products"
data-hint="{{product.name}}|<div><ul><li ng-repeat='color in product.colors'>{{color.name}}</li> </ul></div>" href="#/product/{{product.id}}" class="tile bg-violet" data-click="transform" >
<div class="tile-content icon">
<img src="{{product.pic}}">
</div>
<div class="brand">
<div class="label">{{product.name}} </div>
</div>
</a>
</div>
As a start, your HTML is malformed, you need a closing DIV tag on the end.
Also, in your ng-repeat, your variable name should be different to the array. I'd suggest something like:
ng-repeat="p in products" or ng-repeat="product in products"
Hopefully this helps.