I am new to angular and just stuck in a problem, I cant figure out why the image is not showing, sometime it comes but sometimes its not. I check the console too, there is no error.
<div class="main">
<ul>
<li class="two" ng-repeat="items in student | filter : query | orderBy: studentOrder : direction">
<!--we use ng-src because when we run the file the angular.min.js file reads the html fot image so we get an error in console -->
<a class="link" href="#/details/{{student.indexOf(items)}}">
<img class="image" ng-src="images/{{items.image}}.JPG" alt="Photo is not availble">
<p class="four">{{items.name | uppercase}}
</br>
</p>
<p class="five">
{{items.univeristy | lowercase}}
</p>
</a>
<hr>
</li>
</ul>
</div>
The problem is that your referencing uppercase JPG everytime. It sounds like some images have JPG meaning they will work. But more often than not images are a mixture of various people's naming convention. Please check that all image paths are correct.
--
On a side note, there are a few ways you could improve your code. Firstly I've taken the liberty at assuming your students object.
Please provide this in future as it will lead to more accurate answers
I have changed your scope variable names to be a little more readable.
ng-repeat="student in students" should be more readable [singular] in [plural]. This means that when reference each property you get student.name which makes much more sense at a glance.
I've also set your indexOf function to use angular's native $index. If this is not correct feel free to change back.
Your image's alt tag is not strictly a message to handle cases where the image load failed. Though your message would help for screen reader's it should really describe what the image is intended to be i.e. Photograph of student's University, if you want to display eror messages it would be advisable to use ng-if statements.
I would also recommend switching to controllerAs syntax and binding your data to the controller. You can read up on this here
model:
$scope.students = [{
name: 'joe',
university: 'someuni',
image: 'image-name'
}];
template:
<div class="main">
<ul>
<li class="two" ng-repeat="student in students">
<a class="link" href="#/details/{{$index}}">
<!-- I would usually have the absolute url so taht any changes I need to make can be done in ctrl/srvc -->
<img class="image" ng-src="{{student.image}}" alt="Photo is not availble" width="120">
<p class="four">{{student.name | uppercase}}</br></p>
<p class="five">{{student.univeristy | lowercase}} </p>
</a>
<hr>
</li>
</ul>
</div>
Related
I'm updating an existing site and learning as I go. The following code is for 2, 2-state buttons that I want to update. Visually they're the same, but the code for each is completely different and I'm wondering if anyone can help me understand why?
<ul class="clearfix">
{if $smarty.session.userTypeCount > 1}
{assign var="switchActivCls" value=""}
{if $currentfilename eq "profileSwitch.php"}
{assign var="switchActivCls" value="active"}
{/if}
<li class="proSwitch">
<span class="link-underline">Switch Profile</span>
</li>
{else}
<li> </li>
<li> </li>
{/if}
<div id="logOut" class="logOut">
<li><img src="{$image_path}icons/exit.svg" width="18" height="18" alt="Logout" /></li>
<li><span class="link-underline">Logout</span></li>
</div>
<div id="logOut1" class="logOut" style="display:none">
<li><img src="{$image_path}icons/exit-ovr.svg" width="18" height="18" alt="Logout"/></li>
<li><span class="link-underline">Logout</span></li>
</div>
</ul>
The first is pretty much as I'd expect, although I don't know why there are li's and blank spaces in the else statement. Wouldn't it have been better to use the existing class variable to hide/show the content, rather than leave empty li's on the page?
The second seems more unusual; 2 divs, 4 li's, 4 a tags, a couple of images and some styles hard coded into the logic, seems strange for a single button that's essentially the same as the one above it. I can see that the code pulls in the href and image path, but doesn't appear to be doing anything special, so I'm wondering why the extra effort/code? Does anyone have any ideas why these buttons would have been coded this way - best practice, browser support or something else??
Ideally I want to update both buttons to use something like this:
<a class="icon-link" href="{$pubmenu.logout}"><svg class="fa-icon" role="image" alt="logout" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fa-icon"></use></svg>Name</a>
The above is the method used by icomoon and Chris Coyier, so it should be good and seems to work elsewhere on my site (only tested locally). But feel free to let me know if you have any other recommendations - everyday's a school day :)
Thanks so much in advance.
I have made a widget in Odoo 9 for cutting product description in website view. Added widget="short_desc" to product form view and website product view. I mean something like that:
<span t-field="product.description"/> <!-- full description -->
<span t-field="product.description" t-field-options='{"widget": "short_desc"}'/> <!-- short description -->
<span t-field="product.description" widget="short_desc"/> <!-- also tried this syntax -->
I found helpful this answer: Odoo 9. How to override form widgets?, but it works only in product form and doesn't on website.
So, I have a widgets.js:
odoo.define('wsup.widgets', function (require) {
'use strict';
var core = require('web.core');
var FieldChar = core.form_widget_registry.get('char');
var ShortDescriptionView = FieldChar.extend({
render_value: function() {
console.log('hey, im working!');
this.$el.html('<span>Ok, widget really works</span>');
},
});
core.form_widget_registry.add('short_desc', ShortDescriptionView);
});
When I go to Sales -> Products and open any product, I can see "Ok, widget really works" instead of its description, but when I go to /shop page — product description still has no changes and nothing in JS console.
Here is part of my website product XML view (it works good at all, except short description part):
<div class="product-preview oe_website_sale">
<div class="product-preview__image">
<a t-attf-href="/shop/product/{{ item.id }}">
<span itemprop="image" t-field="item.image" t-field-options='{"widget": "image"}' t-att-alt="item.name"/>
</a>
</div>
<div class="product-preview__info text-center">
<div class="product-preview__info__title">
<h2><a t-attf-href="/shop/product/{{ item.id }}"><span t-field="item.name"/></a></h2>
</div>
<div class="product-preview__info__description">
<p><span t-field="item.description" t-field-options='{"widget": "short_desc"}'/></p>
</div>
</div>
</div>
Why it doesn't work on /shop page? What I forgot to do? Thank you.
As I understand your comment your requirement was to show small amount of description rather than showing a huge description. So, I think this requirement can be easily achieved without create a widget.
Suppose, you have this content as description:
Two is better than one.
Unlike many small headphones, each earpiece of the Apple In-Ear Headphones contains two separate high-performance drivers — a woofer to handle bass and mid-range sounds and a tweeter for high-frequency audio. These dedicated drivers help ensure accurate, detailed sound across the entire sonic spectrum. The result: you’re immersed in the music and hear details you never knew existed. Even when listening to an old favorite, you may feel like you’re hearing it for the first time.
And from this much description if you want to show small amount of description or number of words than you can simple use the below code.
<span t-if="product.website_description and len(product.website_description) > 500">
<t t-set="description" t-value="product.website_description[:500] and product.website_description[:500].replace('+', '\n')+'...'"/>
<p class="text-muted ">
<t t-raw="description"/>
</p>
</span>
In this above code, [:500] will be the number of words to be used.
Output will be:
Two is better than one.
Unlike many small headphones, each earpiece of the Apple In-Ear Headphones contains two separate high-performance drivers — a woofer to han...
Hope, this code will help you.
Thanks.
I am using ng-repeat to create a list of videos. I need to set rel attribute of image in each row. I am trying in following way:
<li ng-repeat="video in top_videos >
<div class=" video-list" >
<a href="#">
<img src="images/aspect-px.png" rel="{{video.video_image}}" /></a>
<h3>{{video.name}}</h3>
</div>
</li>
It is binding the video.name in h3 tag but not binding rel with video.video_image value. Instead of video.video_image's value, it is binding it as a string i.e http://localhost:9000/%7B%7Bvideo.video_identifier%7D%7D. My video.video_image has valid image urls like http://my-cdn-server/vaild-image.jpg.
I have lot's of theme related jQuery methods, which need a valid rel value.
Please help me to make it work.
There is a really good read on understanding the scopes at AngularJS give it a look even if this is not the cause it will give you a great understanding on basic concepts:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
or just watch the video (3 min)
https://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m
What I believe the issue is: top_videos is a plain variable usually this causes troubles when accessing an object inner attributes when using angular 2 way binding, the general recommendation is that there should be an additional level (topLevel.your object):
<li ng-repeat="video in data.top_videos >
<div class=" video-list" >
<a href="#">
<img src="images/aspect-px.png" rel="{{video.video_image}}" /></a>
<h3>{{video.name}}</h3>
</div>
</li>
Obviously that additional level should be added everywhere where you are using your variable
I have a JSon file that is meant to resemble that of a Youtube collection of info.
As such there are several img urls of varying sizes.
I'm currently listing the images in my html using an ng-repeat and directing to a specific image size.
What would be the recommended method to alter the path of this ng-repeat depending upon the screen size (media queries)
<div class="video-list">
<div class="scrollbar scroll-y">
<div data-ng-repeat="video in videos"class="list-items">
<ul>
<li>
<a href="#" data-ng-click="setVideo(video.snippet.resourceId.videoId, video.snippet.title, video.snippet.description)">
<img src="[[video.snippet.thumbnails.medium.url]]"/>
<h3><span>[[video.snippet.title| removeBrackets]]</span></h3>
</a>
</li>
</ul>
</div>
</div>
</div>
but i would like it to display [[video.snippet.thumbnails.default.url]] when the screen is at a specific size. I understand I'll probably need to make a filter or a function. I'm far too new to angular and javascript to understand the best practice.
Any guidance is greatly appreciated :)
I've created a simple directive in Angular which generates a scroller to display some products.
I'm having an issue with one part of the code.
<ul ng-style="{'margin-left':{{currentMargin}}+'px'}">
<li ng-repeat="tyre in tyres" ng-style="{'width':{{liWidth}}+'px'}">
<div class="imageContainer"><img src="../Images/eutl/{{tyre.image}}"/></div>
<div class="details">
<h3>{{tyre.name}}</h3>
About this tire
</div>
</li>
</ul>
and this is what it looks like in the browser once executed
<ul ng-style="{'margin-left':0+'px'}">
<!-- ngRepeat: tyre in tyres -->
<li ng-repeat="tyre in tyres" ng-style="{'width':265+'px'}" class="ng-scope" style="width: 265px;">
<div class="imageContainer"><img src="../Images/eutl/tire.jpg"></div>
<div class="details">
<h3 class="ng-binding">Fuel Efficient</h3>
About this tire
</div>
</li>
<!-- end ngRepeat: tyre in tyres --></ul>
after executing this on my page I get the scroller and the ng-style inside the "li" elements gets displayed correctly, while the ng-style for the "ul" doesn't.
I've tried multiple solutions, even trying to add the same exact ng-style from the "li" element and it just doesn't get processed and no style is added.
Can anyone help me by pointing out a mistake in my markup or a possible cause for one ng-style working on the Li elements and the other not working on the UL itself?
The other problem I'm having is that the value of the currentMargin is not updating in IE8/9 and so on.
Thanks
ng-style accepts an Angular expression that evaluates to an object. This means that if you want to use a variable inside that expression, you can use it directly (without the double-curlies):
ng-style="{width: liWidth + 'px'}"
Double-curlies are used when you want to insert a dynamic, interpolated value to an argument that accepts a string, like <img alt="{{product.name}} logo">. You then put an expression inside those brackets.
Try to do :
ng-style="{'width':liWidth+'px'}">
No curly bracket, a lot of ng directive don't like it