i have a scenario to display a if another div exist. How to check this in angular js html page...
In my .js file i can search for element.find().length . Butcan i check the same in html page itself
here is what i have to try .
The scenario is if there is a page exist i dont want to show one error message div .
This is my index page
<div class="body-content">
<div class="p-row" ></div>
<div data-ng-if="**here to check if there is a content already in the body**" class="error-message-panel"></div>
</div>
Try this.
<div class="body-content">
<div class="p-row" ></div>
<div data-ng-if="$('div').length" class="error-message-panel"></div>
</div>
Related
I have a html code like following
<div class="body">
<h1>ddd</h1>
<p>dadfsaf</p>
<div id="name">
<div class="des">psd</div>
<div>www</div>
</div>
<div>ppp</div>
</div>
I would like to get the content inside a div that starts with <div id="name"> and ends with its corresponding closing tag. Here the content is
<div class="des">psd</div>
<div>www</div>
I tried <div id="name">.*</div>, but it doesn't work. Please help, thank you.
Append, I wrote this code in node.js.
var name = $("#name").html()
console.log(name)
I have a bunch of pages following the same layout but some of them have a "secondary" navigation bar at the top. When this navigation bar exists I have to push the main content down from the page using margin-top in the less.
My issue is I can't find a clean way of doing this just through the DOM.
sample.html
<!-- The secondary navigation below the header -->
<div class="navigation-row text-center">
<div class="col-xs-offset-2 col-xs-8 text-center">
<h4> Sample Page </h4>
</div>
</div>
<!-- Main Content -->
<div class="row">
...
index.html (inherited template that every page uses)
<!-- Main Content -->
<div class="content container-fluid">
<div ng-class="{'secondary-nav' : document.getElementsByClassName('navigation-row').length > 0}" ui-view="main"></div>
</div>
So basically in my main content section I am trying to check if the class navigation-row exists on the page (navigation-row is the class for the secondary navbar) and if it does then add the class secondary-navbar-padding to the div.
I have tried using angular.element which looks like
<div class="row" ng-class="angular.element($document).hasClass('navigation-row') ? 'secondary-navbar-padding' : ''">
but it didn't work. Is this even possible to do? Am I approaching this incorrectly or if there is a suggestion for a better cleaner way to do this I would be open to do that also.
I think you are only checking if the document element itself has that class.
You can count the number of elements with that class like this:
document.getElementsByClassName('navigation-row').length
So you could use ng-class this way:
<div class="row" ng-class="{'secondary-navbar-padding' : document.getElementsByClassName('navigation-row').length > 0}">
I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>
I write angularjs application and have this block of code but just first html-bind-html works for me
<div ng-bind-html='newsTitle'>
<div ng-bind-html='newsDetail'></div>
</div>
When i change the priority like this :
<div ng-bind-html='newsDetail'>
<div ng-bind-html='newsTitle'></div>
</div>
It shows newsDetail value.
How many ng-bind-html per page can i declare? why second value doesn't show?
I guess I understand your problem.
<div ng-bind-html='newsTitle'> <!-- This will replace the content of the div with $scope.newsTitle -->
<div ng-bind-html='newsDetail'> <!-- So this won't appear, because it has been removed by ng-bind-html='newsTitle' -->
</div>
</div>
Look my comments in the code. So if you put newsDetails in the first place, the binded HTML ($scope.newsDetail) will replace the current content aswell.
In a word, ng-bind-html replace the current content of your element with the binded HTML you provide. So you shouldn't put HTML in those elements.
You just have to do something like this :
<div class="news">
<div ng-bind-html='newsTitle'></div>
<div ng-bind-html='newsDetail'></div>
</div>
Some docs about ngBindHtml directive : https://docs.angularjs.org/api/ng/directive/ngBindHtml
If it's real copy of your html. Then I suppose that it's problem with structure. Please close your block:
<div> </div>
You can try and write it like this
<div><span ng-bind-html='newsTitle'></span></div>
<div><span ng-bind-html='newsDetail'></span></div>
I am trying to find all the tags in a div and compare the href to the page in the current url. If they are the same I will add css to the parent of the tag. Why wont this work to find the tags? This is being used in SharePoint.
<script>
var jse_vertical_nav = document.getElementById('JSE_vertical_nav');
alert(jse_vertical_nav.getElementsByTagName('a').length);
</script>
<div id="JSE_vertical_nav">
<div class="jse_link_row">
HOME
</div>
<div class="jse_link_row">
ABOUT
</div>
<div class="jse_link_row">
NEWS
</div>
</div>
It does not work, because you need to use JavaScript AFTER you output your HTML!