I am using AngularJs since long time but finding a strange issue.
The below code works well
var app=angular.module("list",[]);
app.controller("myctrl",function($scope){
$scope.get=function(){
$scope.thiss = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- This code works well-->
<div ng-app="list" ng-controller="myctrl" ng-init="thiss=true">
<p>
<button ng-click="get()">Click</button>
{{thiss}}
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
Facing issue with below code
If I am using following code to declare ng-app and ng-controller in HTML as below, It's not working. Strange issue
<!-- This code doesn't update scope for ng-show -->
<div ng-app="list">
<p ng-controller="myctrl" ng-init="thiss=true">
<button ng-click="get()">Click</button>
{{thiss}}
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
Is there any important concept I am missing with AngularJS.
Any help in this would be greatly appreciated.
<p> is a block-level element.
As per HTML specification
The p element represents a paragraph. It cannot contain block-level elements (including P itself).
If nested, when HTML parser encounters inner p element(<p ng-show="thiss">Show Content</p>) it will implicitly close outer <p ng-controller="myctrl"...> element.
So, once the parsing is done
<div ng-app="list">
<p ng-controller="myctrl" ng-init="thiss=true">
<button ng-click="get()">Click</button> {{thiss}}
</p><!-- paragraph is implicitly closed. So, "thiss" value is not available to ng-show -->
<p ng-show="thiss">Show Content</p>
<p ng-show="!thiss">Hidden Content</p>
</p>
</div>
You can find more discussion about nesting block elements here and here.
the ng-init directive fails to bind to the scope of the declared controller when declared like this.
try to use "ng-init='thiss=true'" with ng-app div.
In second code you are using tag as container which is wrong , tag can element like button and itself which is fine but you should not put these element under tag just remove p tag for and put div it will work fine.
Related
I have some problems with a contenteditable div annoying behaviour. I have a few elements inside, let's say the code looks like that:
<div contenteditable="true">
<p id="element-id-1">element-id-1</p>
<p id="element-id-2">element-id-2</p>
</div>
All works as intended except for one thing - when I triple click the first paragraph to select and remove it (with delete or backspace) the second paragraph content 'jumps' into its place, but retains the first paragraph ID. Is there a way to prevent this, so after I triple click the first paragraph and remove it, the second paragraph remains with the same ID (#element-id-2)? JSFiddle with described functionality here: https://jsfiddle.net/t8e28bmx/ Thanks!
Try this code.
<div contenteditable="plaintext-only">
<p id="element-id-1">element-id-1</p>
<p id="element-id-2">element-id-2</p>
</div>
Reference: https://w3c.github.io/editing/contentEditable.html#h-contenteditable
<div>
<p contenteditable="true" id="element-id-1">element-id-1</p>
<p contenteditable="true" id="element-id-2">element-id-2</p>
</div>
I'm working within a really rigid framework (NetSuite) and there's a small section that I have direct control over which is the h3 and p text below. The structure is similar to this:
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I want to hide the title text and the contents of '.otherstuff' for this page. There are multiple pages similar to this so I'm looking for a clean way of getting it done.
I've tried giving the h3 tag a class, then the following:
$('h3.myclass').parent().closest('h1').css('display','none);
and variations of that but without any luck. I've looked into the .parentUntil() function but I run into the same problem. I have no problem grabbing ancestor elements but run into trouble when trying to grab elements of those ancestors.
Can anyone help me out?
EDIT: Thank you everyone for your time and effort in answering my question. I really appreciate it!
Use closest() to traverse up to the grandparent
Use find() to select the desired elements
You can use hide() in place of css('display', 'none') as they are equivalent
var grandparent = $('.myclass').closest('.grandparent');
grandparent.find('h1, .otherstuff').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3 class="myclass">Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
I can think of two selectors that might work assuming you put .myclass back in.
$('.myclass').closest('.grandparent').find('h1').css('display','none');
or
$('.myclass').parent().siblings('h1').css('display','none');
have direct control over which is the h3
Try utilizing .parent() , .siblings()
$("h3").parent().siblings().hide(); // `$(".parent").siblings().hide();` ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="grandparent">
<h1>Title Text</h1>
<div class="otherstuff">Some text</div>
<div class="parent">
<h3>Text I have control over</h3>
<p>More text I have control over</p>
</div>
</div>
You may use:
$('.myclass').closest('.grandparent').find('>h1,>.otherstuff').hide();
> is for direct descendant element.
closest() selects ancestors, what you want is siblings().
So:
$('.your_h3_class').parent().siblings('h1')
will return an array of h1 siblings of the parent div, and in your case the first item of that array is your h1.
And you can iterate through those and hide them (in case there is ever more than one)
If the title is always immediately before the div with the "otherstuff" class, then you could use this:
$('.otherstuff').prev('h1').css('display', 'none');
Documentation here: https://api.jquery.com/prev/
I am stuck with this thing.May be an immature question.I dont know,I am pretty new to programming.I want to get a particular elements inner html from DOM of the page.The problem is the page is so complex it has so many classes subclasses href,span and all kind of things.Here is what it looks like from the POINT OF VIEW OF MY REQUIRED CLASS(there are a lot of other class and id's but this is the navigation to my required class,I skipped others.)
<html>
<head></head>
<body>
<div class=
<span style=
<iframe class=
#document
<html id=
<body class=
<div class=
<div id=
<div id=
<div class=
<div class=
<span id=
<a class=
<div class= "required class"
</div>
</a>
<span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</iframe>
</span>
</div>
</body>
<html>
Is there anyway to get the particular element using getelementbyID,getelementsbyClassName or any javascript property ?
Is this the correct one ?
document.getElementById('main').getElementsByClassName('test');
IF so how ?
I am not getting any output so I was was wondering this method is right or not..
Thanks in advance.
Assuming that your iframe is loaded from the same domain and you want to access the contents within this iframe, you will have to do something like:
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('required class');
Take a look at this jsFiddle for example which loads fiddle.jshell.net in its iframe and applies a red color to the first editor found. Code of which is as belows:
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('CodeMirror-scroll')[0].style.backgroundColor="red";
If you want the inner HTML of a DOM element then here is what you can do,
First access the element by it's id and use innerHTML to get the HTML content inside of it as,
var x = document.getElementById("main").innerHTML;
alert(x);
You are not getting proper output because you are not referencing the object and not accessing it's HTML content with innerHTML
EDIT: To access elements by class names you can use below script,
var x = document.getElementsByClassName("main");
for(var i=0;i<x.length;;i++){
alert(x[i].innerHTML);
}
i am trying to make a blog page with angularJS and on the message part i have a div like this.
<div class="post-content">
{{jsonPost.message}}
</div>
and inside the variable jsonPost.message i got a string like this
<p>paragraph 1</p>
<p>paragraph 2</p>
but instead creating 2 html paragraphs, instead i see the <p> texts on the screen aswell like a text. Is there a way to make them html code ? and than target them via css.
Thank you, Daniel!
Since you are using v1.2, you need to use ng-bind-html. To bypass sanitization use $sce service:
$scope.jsonPost.message = $sce.trustAsHtml("<p>paragraph 1</p>");
HTML:
<!-- bypasses sanitizaton -->
<div data-ng-bind-html="jsonPost.message"></div>
You can use ng-bind-html-unsafe:
<div class="post-content" ng-bind-html-unsafe="jsonPost.message"></div>
I've only been using angularjs for a day so warning this may be a dumb question!
I have set of divs which display fine if I use the following:
<div class="numbers">
<div ng-class="classes[0]">0</div>
<div ng-class="classes[1]">1</div>
<div ng-class="classes[2]">2</div>
<div ng-class="classes[3]">3</div>
<div ng-class="classes[4]">4</div>
<div ng-class="classes[5]">5</div>
</div>
..but I thought that it would be better to use a loop so I tried:
<div class="numbers" ng-repeat="class in classes">
<div ng-class="class">{{$index}}</div>
</div>
The problem is that when using the ng-repeat each of the repeated items seems to get wrapped with its parent div which forces the width too wide and stops each number floating left.
Here it is on jsfiddle:
http://jsfiddle.net/alanbeech/BLBJq/19/
Put ng-repeat directive on inner div tag
<div class="numbers" >
<div ng-repeat="class in classes" ng-class="class">{{$index}}</div>
</div>
Updated fiddle http://jsfiddle.net/vittore/BLBJq/21/
Thanks this helped me too. For some reason I thought ng-repeat was supposed to be on the outer element rather than the inner. However, it makes sense that it should be in the inner element that needs to be repeated