I'm having a bit of trouble working out why my images aren't rendering properly inside of an ng-repeat with an ng-init, ng-mousover and ng-mouseout.
<div ng-repeat="item in product.items">
<div ng-init="imgsrc='{{item.image01}}'"
ng-mouseover="imgsrc='{{item.image02}}'"
ng-mouseout="imgsrc='{{item.image01}}'">
<img ng-src="{{imgsrc}}" />
</div>
</div>
The correct paths are rendering inside of ng-init, ng-mouseover and ng-mouseout, but the <img> tag is only updating with {{item.image01}} and {{item.image02}} instead of the actual image paths.
What am I missing here?
remove the braces, for assigning values to variables you don't need them inside ng-init.
<div ng-repeat="item in product.items">
<div ng-init="imgsrc=item.image01"
ng-mouseover="imgsrc=item.image02"
ng-mouseout="imgsrc=item.image01">
<img ng-src="{{imgsrc}}" />
</div>
</div>
It's fine to assign a value with ng-init, but ng-moseouver and ng-mouseout don't work the same.
Try to create a function and pass it to them:
ng-mouseover="handleMouseover()"
ng-mouseout="handleMouseout()"
Then update the value of your variable inside of the methods accordingly.
Related
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 a directive template with the following code
<div class="colorpicker">
<div>Chosen color</div>
<div class="color_swatch" style="background-color: {{ngModel}}"> </div>
<div class="clearfix"></div>
<div>Standard colors</div>
<div class="color_squares">
<div ng-repeat="color in colorList">{{color.trim() == ngModel.trim()}} //does not update
<div class="color_swatch" style="background-color: {{ color }};"></div>
</div>
</div>
<div class="clearfix"></div>
In the directive, I update the ngmodel using the below code to the color that was clicked - the div next to "chosen color" is updated with the selected color.
But, the expression "{{color.trim() == ngModel.trim()}}" always amounts to false.
{{color.trim() == ngModel.trim()}}
I have debugged the code and the values are exactly the same.
What I am missing?
This is probably because your variable is precisely named 'ngModel' see that article for more explanation : http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/
To resume this article : never use raw fields use always a dot. So in your scope change
$scope.ngModel
By
$scope.data.ngModel
And in your html change ngModel by data.ngModel.
When using dot you may have some undefined error, this is because you have to initialize the object :
$scope.data={};
Of course you can jsut rename your variable, but you may still have a problem with others directives.
I solved this by removing curly braces around color and using ng-style
<div class="color_swatch" id="colorpicker_selected_color" ng-style="{'background-color': selectedColor}" > </div>
I have the following markup:
<div class="liveResults">
<div><img ng-show="home!==undefined" ng-src="{{homeImg}}"> </div>
<div>0:0</div>
<div><img ng-show="guest!==undefined" ng-src="{{guestImg}}"> </div>
</div>
Inside my controller I fill the data the following way:
$scope.init=function() {
$.getJSON("http://www.example.com/somedata.json", function(result){
$scope.home=result.home;
$scope.guest=result.guest;
$scope.homeImg=$scope.BigImage($scope.home);
$scope.guestImg=$scope.BigImage($scope.guest);
$scope.$apply();
return;
}
}
That function is run by ng-init="init()"
now the ng-src is filled correctly, but ng-show does not work as expected (the images are still hidden) I can see using the browsers devtools, that the images are there, but with a width and height of "0".
When I start the function a second time by assigning it to an ng-click-event, the images are shown correctly.
My guess would be that the combination of "ng-init" and "$scope.apply" causes the problem.
The ng-src directive already have an implicit ng-show in it, so as the comments in you question illustrate this should work for you already:
<div class="liveResults">
<div><img ng-src="{{homeImg}}"> </div>
<div>0:0</div>
<div><img ng-src="{{guestImg}}"> </div>
</div>
I'm running into an issue where I want to display a title label such that there is (i) A primary title which appears as an h1 element and (ii) A sublabel within the h1 element but enclosed in the tag
Doing this works:
<div id="banner">
<h1>
{{rootLabel}}
<span><small>{{rootSubLabel}}</small></span>
</h1>
</div>
My issue with that code though is that the brackets and names for rootLabel and rootSubLabel are visible in the browser until angular properly reads them.
I've found that I can mask that issue by using Angulars ng-bind instead:
<div id="banner">
<h1 ng-bind="rootLabel">
<span><small ng-bind="rootSubLabel"></small></span>
</h1>
</div>
Unfortunately the second bind doesn't get rendered by Angular though.
What I'm wondering is how would something like this be done properly in Angular?
This is because
<h1 ng-bind="rootLabel">
<span><small ng-bind="rootSubLabel"></small></span>
</h1>
will replace everything inside the h1 with {{rootLabel}}
The correct way to use ng-bind in this case should be
<h1>
<span ng-bind="rootLabel"></span>
<span><small ng-bind="rootSubLabel"></small></span>
</h1>
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.