For a TV Guide, I am trying to create a dynamic expression within an ng-repeat directive as follows:
<div ng-repeat="programme in programmes['{{channel}}-wed-jan-14']" alt="{{channel}}">
{{channel}} in my controller should evaluate to something like "eTV". The binding is working fine with the alt="{{channel}}" instance but not with the array instance. Angular simply serves up the line of code commented out. If I hardcode the "eTV" string in place of the {{channel}}, it works fine.
Am I trying to ask Angular to do what it is not designed for, or is it possibly my array handling which is dodgy?
Okay, not sure if I just asked a dumb question, but in the absence of responses, I managed to figure out a solution by writing a filter as follows:
Template:
<div ng-repeat="programme in programmes | getChannelDay:channel:dayString" alt="{{channel}}">
Controller filter:
app.filter('getChannelDay', function() {
return function(programmes, channel, dayString) {
return programmes[channel + dayString];
};
});
The issue with my initial problem
<div ng-repeat="programme in programmes['{{channel}}-wed-jan-14']" alt="{{channel}}">
is that I was trying to put {{channel}} inside the expression, but that is the format for markup.
I tried to use the following instead:
<div ng-repeat="programme in programmes['channel + daystring']" alt="{{channel}}">
but I am doing something wrong here. I am pretty sure there is a way to get this to work - if anyone knows, please comment.
Related
I have an angular page, where, during an *ngFor loop, I want to update a variable, then write it to the HTML during each iteration of the loop.
Like so:
HTML:
<table *ngFor="let data of Dataset">
somehowRunThis(data)
<div>{{methodResult}}</div>
</table>
TS:
...
methodResult: any;
...
somehowRunThis(data): {
let a;
...
this.methodResult = a;
}
etc etc.
Is there any way this can work? Attempting to add a method that returns within the curly brackets seems to not work, and there appears to be no effective way to run arbitrary methods from the HTML in Angular.
Thank you for any assistance you can provide.
Is there any particular reason why you want to trigger this update in HTML?
Depending on your needs you can use pipe (https://angular.io/guide/pipes) or transform the data to desired format in your component.
I would say it's not a good idea to have a method with side-call effects invoked in HTML.
There are a lot of ways to do this. A general advice: sometimes we are looking for an answer in the wrong places, be open :)
Instead of forcing ngFor, just run a simple array.map on your data before sending it to the template.
displayData = this.data.map(el => this.somehowRunThis(el))
this way you'll avoid having terrible performance.
If you don't care and still want to do this thing for some reason you can make your function return it and actually call in template:
{{ myFunctionReturnsText() }}
This is a bad idea because the function calls will run on each change detection so something like Pipes/Directives will be better.
<div data-collapse class="left-justify" id="requirements">
#Html.Raw(string.Format(#_stringLocalizer["RegisterNoticeMessage"], #Html.ActionLink(#_stringLocalizer["RegisterLinkDisplayName"], "Register")))
</div>
In this piece of code, #Html.ActionLink() is returning Microsoft.AspNetCore.Mvc.Rendering.TagBuilder instead of returning anchor element containing URL path to the specified action.
What is the right way to use #Html.ActionLink() in string.Format(). Or, do I missing anything, here?
The helper method Html.ActionLink always returns a TagBuilder object. When you pass such an object into a string parameter, the ToString() method will be called, resulting in your observed output (the class name: "Microsoft.AspNetCore.Mvc.Rendering.TagBuilder").
It seems to me you are trying to create a hyperlink in a rather weird way. Have you tried using the Url.Action helper method? This method returns a plain old string, ready to plug into any href attribute.
E.g. this code would be equivalent of what you're trying to achieve:
#Html.Raw(
string.Format(_stringLocalizer["RegisterNoticeMessage"],
"" + _stringLocalizer["RegisterLinkDisplayName"] + "")
)
Sidenotes:
It is possible get the string value of a TagBuilder, as illustrated in this post.
No need to repeat # when you're already working in Razor/C# context.
Be extremely careful when using Html.Raw as it might result in XSS vulnerabilities.
I'm in the process of refactoring some code written with Angular.js, mostly as an attempt to prevent the braces from rendering whilst everything loads. The original code looks like:
<p class="summary">{{ feature.articleSummary }}<a ng-href="/feature/reader/?articleId={{feature.articleId}}" class="summary">...(more)</a></p>
And then attempted refactoring to:
<p class="summary" ng-bind="feature.articleSummary"><a ng-href="/feature/reader/?articleId={{feature.articleId}}" class="summary">...(more)</a></p>
However, this loses the embedded <a> element. Is it possible to bind an element within a binding? Or would it be better to create a directive to handle a new template? Or is there a better way of handling this?
You should first use ng-bind-html instead of the simple ng-bind and then you should create a filter so sanitise the html:
yourApp.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
So that your code goes like this:
<p class="summary" ng-bind-html="feature.articleSummary | sanitize">...</p>
I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"
I am currently using Umbraco 7.1.8 and I have just finished my final template however I wanted to create a tag like list for the client to add in as they wish.
I have a multiple textbox with the alias workUndertaken however when I call it, it echos System.String[].
My code is pretty simple - I called it two different ways to ensure it wasn't an issue with one method.
<p>#Model.Content.GetPropertyValue("workUndertaken")</p>
<p>#Umbraco.Field("workUndertaken")</p>
Does anyone know where I am going wrong?
Sorry got the answer almost instantly. Was hard to find.
So I will post the answer with the code I am now using. Hopefully others find this useful.
#{
if (Model.Content.GetPropertyValue<string[]>("workUndertaken").Length > 0) {
<ul>
#foreach (var item in Model.Content.GetPropertyValue<string[]>("workUndertaken")) {
<li>#item</li>
}
</ul>
}
}