My Html Code is
<div ivh-treeview="menuPermissionObj.generalAssetManagement"
ivh-treeview-expand-to-depth="-1"
ivh-treeview-on-cb-change="changeCallback(ivhNode,ivhIsSelected, ivhTree)">
</div>
i used this plugin
https://github.com/iVantage/angular-ivh-treeview
is there any way to hide parent checkbox?
thanks in advance.
Yes, but you will need to use a custom node template.
See the list of supported helper methods and scope variables in your templates here: https://github.com/iVantage/angular-ivh-treeview/blob/master/docs/templates-and-skins.md#supported-template-scope-variables
Both isLeaf(node) and the depth variable will pair well with ng-show.
Related
I have given a name using the #var notation to an angular component (app-backtester-chart) created by me, but I don't understand why I don't seem to be able to reference it outside of the div it is in?
I'm clearly missing something here...
{{chartcmp.width}}
<div class="row">
<div class="col" *ngIf="thisStrategy">
{{chartcmp.width}}
<app-backtester-chart #chartcmp
[inputStrategy]="thisStrategy"
[showBenchmark]="showBenchmark">
</app-backtester-chart>
</div>
</div>
The first {{chartcmp.width}} generates an error: Cannot read property 'width' of undefined
So why does the second one inside the div works, and correctly displays the width?
From the Angular documentation (Template reference variables):
You can refer to a template reference variable anywhere in the component's template.
I can't find an explanation anywhere. Any help would be greatly appreciated.
It's beacause of the *ngIf. You can't access a template reference variable if it's not rendred.
I think it's because your *ngIf if you're doing an ngIf all div inside are not constructed as well as your variable ^^
Try this for first one
{{chartcmp === null? "" : chartcmp.width}}
I am trying to make the mid-section to be read only and just enabling the button "OPEN".
I have the below original code. "router-outlet" renders the combination of several feature components. And I do not want to disable each and every elements or feature components
<div="row mid-section">
<router-outlet></router-outlet>
</div>
<div class="row">
<button class="btn btn-default"> OPEN </button>
</div>
I tried by adding as below:
<div="row mid-section" readonly="readonly">
But it still allows to edit and click on button inside mid-section div.
I would really appreciate your help. Thank you!
The HTML readonly property doesn't work like that. Its only for form fields and must be on that actual DOM element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
Without seeing more of your code, I can't really give a better answer than these 2 options.
Option 1, a shared service that has that read only property. You could have a service, that has a behavior subject that you can update from the parent component. The inner components would all need to have that service injected, and do something appropriate when the value changes.
Option 2, you would need a container component that has a new boolean input, and it would need to pass that value down to all the children components (which would also need an input).
Is there a way to allow data bind with html rendering in polymer?
For example in AngularJS there is the "ng-html-bind" directive that does the job. I am searching something similar.
Here it follows an example of where I am willing to use it.
<core-tooltip>
<core-icon icon="info-outline" size="30"></core-icon>
<div tip>
{{box.description}}
</div>
</core-tooltip>
Otherwise any suggestion on how to do it differently?
I am loading this data from a json file and I am searching for a general way to allow "safe" html rendering (against XSS).
This has been answered a couple of times:
How to inject HTML into a template with polymer
How to display html inside template?
As suggested in the accepted answer, I associated an id to my tooltip div:
<div id="tipContent" tip>
{{box.description}}
</div>
Then made my element listen to the box changes:
Polymer("nautes-box",{
boxChanged: function(){
this.$.tipContent.innerHTML = this.box.description.chunk(40).join("<br /><br />");
}
});
I hope this answer will eventually be useful :)
Is there a way to allow data bind with html rendering in polymer?
For example in AngularJS there is the "ng-html-bind" directive that does the job. I am searching something similar.
Here it follows an example of where I am willing to use it.
<core-tooltip>
<core-icon icon="info-outline" size="30"></core-icon>
<div tip>
{{box.description}}
</div>
</core-tooltip>
Otherwise any suggestion on how to do it differently?
I am loading this data from a json file and I am searching for a general way to allow "safe" html rendering (against XSS).
This has been answered a couple of times:
How to inject HTML into a template with polymer
How to display html inside template?
As suggested in the accepted answer, I associated an id to my tooltip div:
<div id="tipContent" tip>
{{box.description}}
</div>
Then made my element listen to the box changes:
Polymer("nautes-box",{
boxChanged: function(){
this.$.tipContent.innerHTML = this.box.description.chunk(40).join("<br /><br />");
}
});
I hope this answer will eventually be useful :)
Yet i have not realized what is the diffrence between this two statement in HTML:
text='<%#Eval("some thing")>'
text='<%#Bind("some thing")>'
Please take a look on the examplke on MSDN, in this case using a repeater
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.repeater.aspx
also
How to: Bind to Data in a Templated Control
http://msdn.microsoft.com/en-us/library/95k0273d(v=vs.80).aspx