<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.
Related
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"]');
<div class="sunti_contain" ng-repeat="sunti in suntis track by $index">
<div class="individual_sunti" ng-click="update_ancestor(sunti)">
<!--needs a unique div#id via angularz-->
<div class="sunti_content" ng-bind="sunti.content"></div>
<div class="sunti_tags" ng-bind="sunti.tags"></div>
<div class="sunti_author" ng-bind="sunti.author"></div>
<div class="sunti_shortid" ng-bind="sunti.short_id"></div>
<div class="sunti_ancestor" ng-bind="sunti.ancestor"></div>
</div>
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
</div>
</div>
</div>
</div>
I want to only show the div.sunti_reply_carriage if there are any descendents rendered in the ng-repeat. If there are no descendents, I don't want the div sunti_reply_carriage to appear at all. However, the ng-show="!sunti.descendents.length" does not work, presumably because it's just outside/before the ng-repeat that references descendents in sunti.descendents
How can I do this?
ng-show="!sunti.descendents.length"
Above code does not show the following code block if length is greater than zero
Ex: If sunti.descendents.length is 1 then
!1 is false then ng-show="false"
If sunti.descendents.length is 0 then !0 is true then ng-show="true"
So, change the expression to ng-show="sunti.descendents.length"
You can use ng-if as well if you want to completely remove the code block from DOM if the expression evaluates to false.
<div class="sunti_reply_carriage" ng-show="!sunti.descendents.length">
<div class="individual_sunti reply_carriage_sunti" ng-repeat="descendent in sunti.descendents">
<div class="sunti_content" ng-bind="descendent.content"></div>
<div class="sunti_tags" ng-bind="descendent.tags"></div>
<div class="sunti_author" ng-bind="descendent.author"></div>
<div class="sunti_shortid" ng-bind="descendent.short_id"></div>
</div>
</div>
You can use sunti.descendents.length instead of !sunti.descendents.length
If length property returns 0 then it will be hidden because it is falsey value in JavaScript, if it will return some value i.e. a number then it will be shown because it is truthy value in JavaScript.
If you want to show or hide you can use ng-show or ng-hide directives, if you want to completely remove/insert the DOM conditionally then you can use the ng-if directive in this case.
Using the ng-show directive
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-show="sunti.descendents.length">
<!-- code omitted for brevity -->
</div>
</div>
Using the ng-if directive
<div class="sunti_reply_carriage_wrapper">
<div class="sunti_reply_carriage" ng-if="sunti.descendents.length">
<!-- code omitted for brevity -->
</div>
</div>
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
I want to show the elements that contain displayCategory.name with the ng-click above it, but it's not working as expected.
.divider-row
.row-border(ng-hide="showMe")
.row.row-format
.col-xs-12.top-label
Find where you stand
%hr.profile
.row.labelRow
.col-xs-12
%ul
%li(ng-repeat='category in service.categories')
.clear.btn.Category(ng-click='thisCategory(category) ; showMe = true') {{category.name}}
.divider-row
.row-border(ng-show="showMe")
.row.row-format
.col-sm-12.col-md-12.top-label.nopadLeft
What do you think about {{displayCategory.name}}
I dropped your haml into a converter and this is what it spat out (clearly incorrect):
<div class="divider-row">
<div class="row-border">(ng-hide="showMe")
<div class="row row-format">
<div class="col-xs-12 top-label">
Find where you stand
</div>
</div>
<hr class="profile"/>
<div class="row labelRow">
<div class="col-xs-12">
<ul>
<li>(ng-repeat='category in service.categories')
<div class="clear btn Category">(ng-click='thisCategory(category) ; showMe = true') {{category.name}}</div>
</li>
</ul>
</div>
</div>
</div>
<div class="divider-row"></div>
<div class="row-border">(ng-show="showMe")
<div class="row row-format">
<div class="col-sm-12 col-md-12 top-label nopadLeft">
What do you think about {{displayCategory.name}}
</div>
</div>
</div>
</div>
So after some quick googling I found that you should be writing it like this:
.divider-row
.row-border{"ng-hide" => "showMe"}
.row.row-format
.col-xs-12.top-label
Find where you stand...
As that will convert to what you need:
<div class="divider-row">
<div class="row-border" ng-hide="showMe">
<div class="row row-format">
<div class="col-xs-12 top-label">
Find where you stand
Using curly braces instead of round ones for attributes
I cannot run your code to verify, but I think the problem is that the binding property showMe should be replaced with some object like status.showMe.
For example, define $scope.status = { showMe: false}; outside the ng-repeat (in your controller maybe).
Please check a working demonstration: http://jsfiddle.net/jx854d3y/1/
Explanations:
ng-repeat creates a child scope for each item. The child scope prototypical inherits from the parent scope. In your case, the primitive showMe is assigned to the child scope. While you use it outside the ng-repeat, where it tries to get the value from the parent scope, which is undefined. That is why it is not working.
Basic rule is: always use Object, instead of primitive types, for binding.
For more details, please refer to: https://github.com/angular/angular.js/wiki/Understanding-Scopes
My index.html page is like as follows:
<div id="sidepanel" data-ng-controller="ListCtrl">
<li data-ng-repeat="record in records">
{{record.id}}
<input type="checkbox" data-ng-model="addwidget">
</li>
</div>
<div id="main">
<div data-ng-view></div>
</div>
for this data-ng-view i have another page recordlist.html in that i have following code:
<div data-ng-controller="ListCtrl">
<ul class="design">
<li data-ng-repeat="record in records">
<div data-ng-switch data-on="record.category">
<div data-ng-switch-when="reporting1">
<div id="{{record.id}}" data-ng-show="addwidget">{{record.description}}</div>
</div>
<div data-ng-switch-when="reporting2">
<div id="{{record.id}}" data-ng-hide="addwidget">{{record.description}}</div>
</div>
</li>
</ul>
</div>
My question is i want to show the first div when i check the checkbox & when i uncheck it i want to show the second div.When both of the data-ng-model & data-ng-hide/show are on the same page then it works fine but in my case it present on two different pages.
Is it correct ? How can i implement this. Need Help.Thanks.
The problem is that you are setting addwidget in the first controller, but is trying to use it in the second. Controllers are not singletons.
So, in this situation:
<div id="sidepanel" data-ng-controller="ListCtrl">
...
</div>
<div id="main">
<div data-ng-view>
<div data-ng-controller="ListCtrl">
</div>
</div>
</div>
You got two separated controllers and scopes. And you are setting addwidget in the first trying to read in the second.
You can either bind it to the root scope $root.addwidget or use a service share to the states.
As you have many records, binding directly to root is a problem, as all of them are going to share the same state. So you gonna need an object in the rootScope and bind the option by id $root.addwidget[record.id]. Made a pretty simplified modification here.