I dont know anything about Angular but I need to put the $index number inside the ng-model and the src path (_XXX) but I dont know how to do it. I only need the $index number, Could you help me with this?
I tried to put {{$index}} but does not work...
<div ng-repeat='opt in el.options_final' for='radio{{$index}}'>
<div class='img-radio'>
<input id='image_location_{{$index}}' ng-model='el.image_XXX' />
<img src='{{el.image_XXX}'>
</div>
</div>
Thank you.
You would need to use bracket notation for ng-model, ng-model="el['image_' + $index]" and similarly use ng-src and append index, ng-src="{{el['image_' + $index]}}"
<input id='image_location_{{$index}}' ng-model="el['image_' + $index]" />
<img ng-src="{{el['image_' + $index}}">
Why ng-src?
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.
Related
My code consists of img tag which fetches image dynamically.
<img src="{{'http://example.com/'+category.name+'.png'}}">
What I want to do is write Javascript code to replace & from the category name i.e.
<img src="{{'http://example.com/'+category.name.replace("&", "AND")+'.png'}}">
But Angular gives me the error when I write JS inside of the src binding. Please help me to fix this!
You are using double quotos within double quotos try this -
<img src="{{'http://example.com/'+ category.name.replace('&', 'AND')+'.png'}}" />
Either you can bind this way too
<img [src]="'http://example.com/'+name.replace('&', 'AND')+'.png'" />
You can do something like this.
<img [src]="createUrl()">
in the .ts file.
public createUrl(): string {
return `http://example.com/${category.name.replace("&", "AND")}.png`;
}
Escape the double quotes properly.
<img src="{{'http://example.com/'+category.name.replace(\"&\", \"AND\")+'.png'}}">
i have an ng-repeat but i need to use Angular expression inside javascript of my html page(of course app and controller are declared, but have not been posted here):
<div ng-repeat="eleRubrique in scopeComplet">
<script type="text/javascript">
alert('index ' + {{$index}});
</script>
</div>
That does not work. what would be a workaround ?
Thank you for an answer.
I think this would work for you
<div ng-repeat="eleRubrique in scopeComplet" ng-init="alert('index ' + $index)"></div>
And if you would need a more complex script I would recommend to write a function for that and call the function from ng-init
You should not use double curly braces {{}} in JavaScript. They are meant for HTML only in Angular.
Since the JavaScript code in your HTML has nothing to do with the view, can you not achieve the same goal in the controller?
I have a problem using ng-style with ng-repeat.
This is my code:
<div style="display:table-row" ng-repeat="row in Data.Communications" id="{{row.Guid}}">
<div style="display:table-cell;">
<img ng-src="{{row.Path}}" ng-show="row.Path" ng-style="row.Style" />
<i class="{{row.Icon}}" ng-show="row.Icon" ng-style="row.Style"></i>
</div>
</div>
This is the JSON (Loaded server-side from a DB):
$scope.Data: {"LastUpdate":"23/03/2016 11:45","Communications":[{"Guid":"2","Path":null,"Icon":"fa fa-warning","Style":"{'color':'#ffff00'}"},{"Guid":"1","Path":null,"Icon":"fa fa-warning","Style":"{'color':'#ffff00'}"},{"Guid":"3","Path":"/images/blink_yellow.gif","Icon":null,"Style":"{'width':'15px', 'height':'15px'}"}]}
The "Style" is not applied to my elements. Could someone help me to solve this problem?
Basically you have strigified JSON, do parse it before assign it to ng-style
ng-style="doParseToJson(row.Style)"
Code
$scope.doParseToJson = function(style){
return JSON.parse(style);
}
Also make sure response should be wrap with " double qoutes instead of single quotes like '{"color":"#ffff00"}' to keep it valid for parsing the JSON.
I am new to writing directives. I have this snippet of code that works and I am trying to make it a directive:
<div ng-click="details=!details" class="row toggleHeader" ng-class="{open : details}">
<div class="col-md-12">
<h4>Some title</h4>
</div>
</div>
<div id="the-details" class="row" ng-show="details">
<div class="col-md-2">
...content...
</div>
</div>
So, my initial pass was
app.directive('pbTogglePanel', function() {
return {
restrict: 'A',
scope: {
variableName: '#',
panelTitle: '#'
},
template: '<div ng-click="somevariable=!somevariable" class="row toggleHeader" ng-class="{open : somevariable}">\n<div class="col-md-12">\n<h4>{{panelTitle}}</h4>\n</div>\n</div>\n\n<div id="the-somevariable" class="row" ng-show="somevariable">\n<div class="col-md-2">\n...\n</div>\n</div>',
};
});
with the html
<div pb-toggle-panel panel-title="My Directive Panel Test" variable-name="foobar"></div>
This works, in the sense that the panel toggles as expected. I obviously did not try to use the variable "foobar" passed from the html attribute. When I try to use it, the code throws an error and the toggle does not work. I tried using the template:
'<div ng-click="{{variableName}}=!{{variableName}}" class="row toggleHeader" ng-class="{open : {{variableName}}}">\n<div class="col-md-12">\n<h4>{{panelTitle}}</h4>\n</div>\n</div>\n\n<div id="the-{{variableName}}" class="row" ng-show="{{variableName}}">\n<div class="col-md-2">\n...\n</div>\n</div>'
Although "foobar" shows up in all those places, the toggling fails and the console logs an angular error.
So, what's the correct way to pull in more than one html attribute?
Also, the goal would be to allow the contents of this DIV to replace ...content... placeholder in my template. Not sure how to pass that either.
I feel if I can just get my head around how this data is passed, I'll be good from there out.
TO HELP CLARIFY
This works: http://codepen.io/smlombardi/pen/MYygpy
But I wanted to pass the name of the variable for the toggler to use from an attribute too, and this does NOT work:
http://codepen.io/smlombardi/pen/KwzPaw
The problem of your last, non-working example is not about passing multiple parameters but rather abusing the angular's interpolation mechanism. If all you want is to use the variableName, the minimal change to make your last code example work (that is to collapse/expand) would be to change the template from string to function with concatenation:
{...
template: function(tElem, tAttr){return '<div ng-click="' + tAttr.variableName + '=!' + tAttr.variableName +...;
}
But there is no point to do so as long as you use directive isolating scope, which effectively hides the value of the variableName from you. You will also probably want to change to scope:false and get attributes from the tAttr of the template function instead. Modified example.
I use ng-src to load images. Value is loaded from some scope variable, like this:
<img ng-src="{{currentReceipt.image}}"/>
My issue is that when I run delete $scope.currentReceipt, it makes ng-src attribute empty but doesn't reflect it in src attribute. So as a result I keep seeing that image where I need empty placeholder.
How can I deal with it?
This is the expected behaviour from the ngSrc and ngHref directives. These directives only support recognising new paths, but when path is not available, the directives will exit silently (I see a pull request here.).
So a possible workaround could be to use ngShow along with the ngHref to hide the tag altogether when image variable is not available anymore:
<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />
call $scope.$apply() after delete $scope.currentReceipt.
The following solution works for me:
<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />
You can actually check for length and do
<img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">