Print case find empty parameter - angularjs

How to display a message if the parameter is empty ?
I have a variable " parameters":{}, where I check if it has variables . If you separates the ng -switch . I need you to print a message " no data " if he finds the " parameters":{}.
<div ng-repeat="p in ctrl.currentreport.parameters" ng-switch="p.dataType">
<div ng-switch-when="Integer">
<reportinteger parameter="p"></reportinteger>
</div>
<div ng-switch-when="DateTime">
<reportdate parameter="p"></reportdate>
</div>
<div ng-switch-when="Boolean">
<reportboolean parameter="p"></reportboolean>
</div>
</div>

Just add this:
<div ng-hide="Object.keys(ctrl.currentreport.parameters).length">No data</div>
Wherever you want
EDIT: even better
<div ng-show="angular.equals({}, ctrl.currentreport.parameters)">No data</div>

Related

capture an html element with data-attribute - javascrit ".querySelector"

const footer = article.querySelector('footer'); //gets the node correctly
then
comments = footer.querySelector('span[data-sigil="comments-token"]'); //doesn't capture the node
this is the fragment i'm trying to traverse (where a span element with a data-sigil="comments-token" attribite exists)
<footer class="_22rc" data-ft="{"tn":"*W"}">
<div class="_2ip_ _4b44" id="feedback_inline_2988733091416038" data-sigil="mufi-inline">
<div class="_34qc _3hxn _3myz _4b45"><a
href="/groups/2965875847035096?view=permalink&id=2988733091416038&anchor_composer=false&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=%2AW-R"
role="button" data-sigil="feed-ufi-trigger">
<div class="_rnk _77ke _2eo- _1e6 _4b44" id="u_0_3f" data-sigil="reactions-bling-bar">
<div class="_1w1k" data-sigil="reactions-sentence-container"><span class="_qfz _77kf">
<div class="_1g05 _77lc" style="z-index:3"><i class="img sp_t0F5GNpHI8g sx_bb89e7"
role="presentation"><u>Mi piace</u></i></div>
</span>
<div class="_1g06" aria-label="4 ha aggiunto reazioni, tra cui Mi piace">4</div>
</div>
<div class="_1fnt"><span class="_1j-c" data-sigil="comments-token">Commenti: 5</span></div>
</div>
</a></div>
<div class="_52jh _7om2 _15kk _15ks _15km _4b47 _4b46" data-sigil="ufi-inline-actions">
<div class="_52jj _15kl _3hwk _4g34"><a class="_15ko _77li touchable"
data-store="{"reaction":0,"feedbackTarget":2988733091416038,"kaiOSReactions":false}"
aria-pressed="false" role="button" data-ft="{"tn":">"}" id="u_0_3g"
data-sigil="touchable ufi-inline-like like-reaction-flyout" data-autoid="autoid_40"
data-uri="https://m.facebook.com/ufi/reaction/?ft_ent_identifier=2988733091416038&reaction_type=1&story_render_location=group&feedback_source=2&is_sponsored=0&ext=1598970363&hash=AeQxJKCaVFJm_BkK&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=%3E%2AW-R">Mi
piace</a>
<div class="_1ekf" role="link" tabindex="-1" data-sigil="screenreader-reactions-trigger">Vedi altre
reazioni</div>
</div>
<div class="_52jj _15kl _3hwk _4g34"><a class="_15kq _77li"
data-click="{"event":"click_comment_ufi","target_id":2988733091416038}"
href="/groups/2965875847035096?view=permalink&id=2988733091416038&fs=2&focus_composer=0&refid=18&_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&__tn__=S%2AW-R"
data-ft="{"tn":"S"}"
data-sigil="feed-ufi-focus feed-ufi-trigger ufiCommentLink mufi-composer-focus">Commenta</a></div>
</div>
</div>
</footer>
The examples you gave work. See https://jsfiddle.net/zmg8sc7h/
Perhaps the article.querySelector('footer'); is finding another footer section and not the one you're expecting. Try article.querySelectorAll('footer'); or document.querySelectorAll('footer'); to see how many results you get, or try making that part more specific like document.querySelector('footer._22rc');
You might as well just select what you want directly though instead of going through two queries.
document.querySelector('footer span[data-sigil="comments-token"]');

ng show condition syntax

<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id=='currentUser.id'">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id=='currentUser.id'">
<h5>{{f.friend_id}}</h5>
</div>
</div>
currentUser is my rootscope variable which stores id when a user logs in.
friend_id and user_id are visible from my friend controller(which i have added) and so i know the values are present
but i dont know why the condition doesnt turn true cuz both the values show when i run this code
Remove quote of currentUser.id-
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id==currentUser.id">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id==currentUser.id">
<h5>{{f.friend_id}}</h5>
</div>
You can replace your code with my code.
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id==currentUser.id">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id==currentUser.id">
<h5>{{f.friend_id}}</h5>
</div>
We have to remove quotes because with quotes it's not a variable. After using quotes it will be now string.

(DNN/2sxc) Tokens in Template doesn't replaced with values

I have a problem with an token template in 2sxc V.8.4.5 on DNN 7.4.2. It's a template with support ListContent and ListPresentation:
<div class="row">
<div class="col-md-12">[ListContent:Toolbar]
<h[ListContent:Presentation:TitleHTag] style="text-align:[ListContent:Presentation:TitleTextAlign];">[ListContent:Titel]</h[ListContent:Presentation:TitleHTag]>
<p style="text-align:[ListContent:Presentation:TextTextAlign];">[ListContent:Text]</p>
<repeat>
<div class="col-md-[Content:Presentation:BootstrapWidthContent]">[Content:Toolbar]
<div>
<p><img src="[Content:Image]" style="float:[Content:Presentation:CssImageFloat];margin-top:8px; width:[Content:Presentation:CssWidthImage]"/></p>
</div>
<h[Content:Presentation:Title1HTag] class="[Content:Presentation:CssClassColorTitle]">[Content:Title]</h[Content:Presentation:Title1HTag]>
<h[Content:Presentation:Title2HTag] class="[Content:Presentation:CssClassColorTitle2]">[Content:SubTitle]</h[Content:Presentation:Title2HTag]>
<div class="[Content:Presentation:CssClassColorText]">[Content:Text]<br /><br />
<a class="[Content:Presentation:CssClassColorLinkText]" href="[Content:Link]">[Content:LinkText]</a>
</div>
</div>
</repeat>
</div>
</div>
The problem are at the lines:
<h[Content:Presentation:Title1HTag] class="[Content:Presentation:CssClassColorTitle]">[Content:Title]</h[Content:Presentation:Title1HTag]>
<h[Content:Presentation:Title2HTag] class="[Content:Presentation:CssClassColorTitle2]">[Content:SubTitle]</h[Content:Presentation:Title2HTag]>
Some tokens in that lines are not replaced with values. i'm getting
<h class="titlered">Title1<h>
<h class="titlered">Title2<h>
It cannot be a problem with Content:Presentation, because the other tokens from this presentation are correct replaced.
Any hints?
I have to guess a bit, but I'm thinking of some kind of spelling / naming issues. Are you sure, that the field is really called Title1HTag, or could it be a misspelling like Titel1HTag or TitleH1Tag?
I recommend that you try to output the value somewhere else just to look at it, like
XXX[tag-to-test]YYY

AngularJS: Best practice displaying static text based on a state/variable

I have small text portions like
<div>
<h4>Why Register?</h4>
<p>As candidate...</p>
</div>
opposed to
<div>
<h4>Why Register?</h4>
<p>As company...</p>
</div>
Based on a variable in my controller I insert the correct partial with:
<div ng-switch on="role">
<div ng-switch-when="candidate">
<div ng-include="'candidate.html'"></div>
</div>
<div ng-switch-when="company">
<div ng-include="'company.html'"></div>
</div>
<div ng-switch-default>
<div ng-include="'candidate.html'"></div>
</div>
</div>
This does the job but it looks awful. Is there any way I could do it better?
You could always hold your string vars in javascript or external json file and use markup which is tied to a model like this:
<div ng-controller="something">
<h4>Why Register?</h4>
<p>{{who}}</p>
</div>
and then inside your "something" controller provide code:
if(role == "company")
$scope.who = "As company...";
else
$Scope.who = "As candidate...";
If you have many places in code that use such feature, you could consider holding variables in external json and then reading them in javascript/controller.
You can use:
<div ng-include="(role || 'candidate') + '.html'"></div>
If the parts are not that big you can put them all up there and use ng-show to filter which gets actually shown. This takes up the least markup.
<h4>Why register?</h4>
<p ng-show="isCompany">Company targeted content...</p>
<p ng-show="isCandidate">Candidate targeted content...</p>

Angularjs: ng-repeat + ng-switch-when != expected

The following code doesn't seem to work correctly:
<div ng-switch on="current">
<div ng-repeat="solution in solutions" ng-switch-when="{{solution.title}}">
{{solution.content}}
</div>
</div>
The output of {{solution.title}} is literally {{solution.title}}. It doesn't get processed by angular.
The ng-switch-when tag requires a constant, you can't put a variable in it.
You can rework your code as follows:
<div ng-repeat="solution in solutions">
<div ng-show="current == solution">
{{solution.content}}
</div>
</div>

Resources