We Keep Coding

AngularJS: Creating a class that I can use in my app.js file to use hyperlink pictures

In my app.js file I have classes that are data driven, such as text and picture classes. I have a hyperlink class for which I used Href that looks like this:
div class = "links" ng-if="field.fieldLink">
<a ng-if="content.LinkField.fieldLinkNewTab !== false" target="_blank"
ng-href="{{ content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }}</a>
<a ng-if="content.fieldLink.fieldLinkNewTab === false" ng-href="{{
content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }} </a>
</div>
So this way I can easily use it like this in my .JS file:
fieldLink
{
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
The problem that I am having is making a field for an image:
fieldLinkImage: "documents/pictures/etc.jpg"
fieldLinkHref: "www.etc.com",
Clicking the picture should redirect me to the url.
I can do this in my .html file just fine, by simply wrapping the image in the class, but I want to select the image in my .JS file.
How do I make this happen without hard coding the links and images in the .html file ?
Thank you!

Sorry about this but I will criticize your code a bit.
First to point out that you have a typo, LinkField should probably be fieldLink in your first <a> element.
Next, why are you comparing !== false when you can just check if var is true or truthy (just put variable in condition - no need to compare with anything - if it's there or is true it will be truthy).
Also to create a new element just because you need to have different attribute is bad, you will get tons of code and get lost at some point. Instead use ng-attr-target which will give you same thing in one line - puts target (or any other) attribute based on condition.
But all of that can be fixed of course, I will take a wild guesses on your data structure during this since you haven't provided jsfiddle or similar. I guess that you have a list of objects that hold images or links and you want to put them together in some ng-repeat based on the type either show link or image.
So this would be your data object:
let contentObj = [{
fieldLink: {
fieldLinkNewTab: false,
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
}
}, {
fieldLink: {
fieldLinkNewTab: true,
fieldLinkHref: "www.etc.com",
fieldLinkImage: "https://images.pexels.com/photos/590490/pexels-photo-590490.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
}
}];
and this would be your html, if fieldLinkText is there it will show text, if fieldLinkImage is there it will show image, keep in mind if you have both it will show both, also by utilizing power of ng-attr-target you show one element in html and not two with ng-if:
<div class="links" ng-repeat="content in contentObj" ng-if="content.fieldLink">
<a ng-attr-target="{{(content.fieldLink.fieldLinkNewTab) ? '_blank' : undefined}}" ng-href="{{ content.fieldLink.fieldLinkHref }}">
<span ng-if="content.fieldLink.fieldLinkText">{{ content.fieldLink.fieldLinkText }}</span>
<img class="image-class" ng-if="content.fieldLink.fieldLinkImage" src="{{content.fieldLink.fieldLinkImage}}" alt="" />
</a>
</div>
I hope this is helpful, I didn't mean to be too critic, if I was sorry about that, but these things will help you in future. And here's the fiddle that you can play on change your data tweak it up a bit: https://jsfiddle.net/pegla/j392Lvdp/3/

AngularJS Ng-repeat, create dynamic dom with expressions

Here is The problem i am trying solve. I would like to create a JS script that uses angular to dynamically create div elements while adding an additional expression eg {{levelone}}.
Here is an an example of what i am expecting the output to be if i know i have 5 iterations of Dom elements.
<div ng-switch-when="0">{{levelZero}}</div>
<div ng-switch-when="1">{{levelOneA}}{{levelOneB}}</div>
<div ng-switch-when="2">{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}</div>
etc.....
So as you can see i am adding an expression on each time. I just dont know how i can keep adding them on via a repeat loop and then get them to compile correctly with AngularJS. I am trying to make my DOM as Dynamic as possible.
EDIT
Every time i loop 1 more i am adding an expression ->{{expression}} to the div with JS or angular. I am not hard coding the expression into each div as each div is also dynamically created. But with a twist i am adding that extra expression ie 3 expressions from the previous div and adding one more expression making four. see example below.
<div ng-switch-when="3"{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}</div>
This one below is dynamically generated
<div ng-switch-when="4"{{levelTwoA}}{{levelTwoB}}{{levelTwoC}}{{THIS EXPRESSION IS GENERATED IN js AND ADDED & COMPILED}}</div>

The DOM will be dynamic as long as your data bindings are. I need more info (data model, expectations) to be more accurate but if you set up your data and bind it correctly, it should work. for example if your data looked like this
var data = {
"levelOne" : {},
"levelTwo" : {
"elements" : ["<span id="firstEl"></span>, ...]
},
"levelThree" : {
"elements" : ["<span id="firstEl"></span>, <span id="secondEl"></span>, ...]
}
Then in your template do what #paulgoblin suggested.
}

You could ng-repeat within each switch case. Eg.
<div ng-switch-when="0">
<span>{{levelZero}}</span>
</div>
<div ng-switch-when="1">
<span ng-repeat="expression in levelOne">{{expression}}</span>
</div>
<div ng-switch-when="2">
<span ng-repeat="expression in levelTwo">{{expression}}</span>
</div>

You might want do this with scope function.
<div ng-switch="assignment.id">
<div ng-switch-when="1">{{ getExpressions(assignment.id) }}</div>
<div ng-switch-when="2">{{ getExpressions(assignment.id) }}</div>
</div>

How to use ">" comparator in AngularJS ng-if statement

Is it possible to use the 'greater than' comparator in an ng-if in HTML?
The problem is that the ">" symbol prematurely closes the HTML tag.
ex.
this: <div ng-if="foo>0" class="bar"> (HTML STUFF) </div>
is read as: <div ng-if="foo"> (0 class="bar"> HTML STUFF) </div>
I ended up getting around this by using ng-if="foo!=0" but I could probably use the less than comparator instead but I was just curious in case I absolutely HAD to use the greater than symbol for some reason. Or would I perhaps have to move this logic somewhere else like in my controller instead of in my view?
EDIT 1
So it definitely seems like the comparator itself isn't the problem and something else is going on in my code. Oddly, when I have spaces before and after the comparator it works but without spaces it doesn't. I'm also using angular 1.3.15 if that means anything.
<div class="paginate" ng-if="list.total > 0"> works
<div class="paginate" ng-if="list.total>0"> does not work

This is an example of using the > symbol. This works fine.
<div ng-if="myvariable.length > 2">
</div>

I recommend creating a method on the scope and abstracting the logic of the condition. The business rules may expand and change. With a separate method you don't need to alter the template.
// in controller
$scope.isValidFoo = function () {
return $scope.foo > 0;
}
// in template
<div ng-if="isValidFoo()">...</div>

knockout - set visible only one item in a list generated by json

hi it's a cordova app that use devexpress framework based on knockout i need to set visible only one item in a list
the item should correspond to the param.id or this
id_agenzia:ko.observable(params.id),
i've tryed with jquery (setting the id "#"+$data.id_agenzia visible if == id_agenzia ) but if i integrate it doesn't work
the goal is to do something like this
if i put this line it ignores
how is the right way to set visible only the div that corresponds to $data.id_agenzia is valid for $data.id_agenzia==id_agenzia ?
thank you for help
this is the js code with jsfiddle code added
self.selected_id_agenzia = ko.observable('two');
self.jsonLista = ko.observableArray([
{id_agenzia:ko.observable('one'), nome:'N1'},
{id_agenzia:ko.observable('two'), nome:'N2'}
noDataLabel: noDataLabel,
this is the html code with jsfiddle code added
<div class="list-indentation" data-bind="foreach:jsonLista" style="padding-bottom:60px;">
<div id="$data.id_agenzia" data-bind="visible: id_agenzia()==selected_id_agenzia()">
<div class="agency-description-box" >
<span data-bind="text: $data.id_agenzia" class="agency-name"></span>
<span data-bind="text: $data.nome" class="agency-name"></span>
</div>
</div>
</div>

I think I misunderstood what you were doing with the variables. I have made a simplified fiddle to do what I think you want. To make it work:
I assumed a dxList was more or less like a foreach
I changed the name of the outer id_agenzia to selected_id_agenzia, as I was not able to get the comparison to work using $data and $root to distinguish them
I made both items ko.observables, and used the function call on each in the comparison
</div>
The code is all at the fiddle:
http://jsfiddle.net/3ktq4b9s/

jQuery - Store conditions in a string and execute them later

I'm creating my own templating engine which is used to render HTML.
Below, you have a template which will be rendered using my template engine:
{{TMPL:Import=../../../../Data/Templates/Ribbon/tabs.tmpl; Name=Tabs}}
<div id="{{Id}}" class="ribbon">
<!-- All the different tabs are being rendered here. -->
{{Render:Tabs; Value="Tabs"}}
</div>
Now, I was think about a technique on how I could make some sections render if a condition matches.
I tought to change my template as following:
{{TMPL:Import=../../../../Data/Templates/Ribbon/tabs.tmpl; Name=Tabs}}
{{If: "{{Id}}" != "Undefined"}}
<div id="{{Id}}" class="ribbon">
<!-- All the different tabs are being rendered here. -->
{{Render:Tabs; Value="Tabs"}}
</div>
{{EndIf}}
In human language, that would be, id the parameter "Id", which is passed by my template engine, is not "undefined, that I would render the div element.
But now I want to know how I can execute this condition.
Through the usage of regexes and replacements, the final condition will look like this:
"Undefined" != "Undefined"
But this is stored a a simple text value.
Is there a way in jQuery / Javascript, on how I can execute the condition stored in the string?
Kind regards,

eval('"Undefined" != "Undefined"')