AngularJS / CSS-Selectors - Form Validation - javascript

Simple question:
Why is it that the summary class can directly be appended to the <span> element but not the ng-classes to the <form> tag?
Is it because the ng-classes are later generated during runtime? What are the guidelines?
CSS:
HTML:

That is not how you use ng-class. Instead do this:
<span class="summary" ng-class="{ 'ng-valid': myForm.$valid, 'ng-invalid': !myForm.$valid }">...</span>
If you want to do it the way you have it do it like this:
<span class="summary {{ myForm.$valid ? 'ng-valid' : 'ng-invalid' }}">...</span>
Next time you need help on stackoverflow, please paste the code instead of images. Would make it a lot easier.

Related

Add class on hover on Angular JS

I'm trying to add a class when hovering the li element in the code below with Angular
<li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}">
<a href="interna.html">
<img src="assets/images/cola.png">
</a>
</li>
This is all the functionality the page will have, so I though maybe it is not necessarily to add a new js file for the js.
When the mouse enter to the li it should have the new class selected. The code above it is not working, and I cannot figure out why.
Here is an example of my code on a fiddle: https://jsfiddle.net/mjrmeffc/
Why do you need an extra file if you can write the logic in your angular application?
I assume you make use of ng-app and have a so called javascript file where your logic is, and you should include it in here.
Here is an example of the proper way of adding/removing a class.
<div ng-app>
<div
class="italic"
ng-class="{red: hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false">
Test 1 2 3.
</div>
</div>
NB I found this in another stackoverflow question, please make proper use of google search first, I don't have enough reputation to flag your question, or to make a comment.
* EDIT *
It seems like you're not yet familiar with AngularJS. You need to include your 'app.js' or 'script.js' whatever you want to call it. In there you define your application using
var app = angular.module('yourappname', [/* add your dependencies here*/]);
//Other logic like controllers or services
And your HTML should be
<div ng-app="yourappname">
<div ng-controller="yourController">
PLEASE ORIENTATE YOURSELF FIRST BEFORE YOU START ASKING QUESTIONS
Try using ng-mouseover attr
<li ng-mouseover="hoverIn()" class="pull-left" ng-class="{{applyClass}}">
write a function hoverIn() in your script and assign value when hover over
$scope.hoverIn = function() {
this.applyClass = "red";
}
Working Demo

Creating tool to add blog tags: when the post is submitted the dynamically added tags are ignored

I'm trying to create a simple tool to ease the addition of tags in blog posts (not sure if I can mention the website, therefore i won't do it now).
I've inspected the code and I've noticed that when a tag is added, a new span is created between the divs post-form--tag-editor and tag-input-wrapper
<div class="post-form--tag-editor" data-subview="tagEditor">
-> TAG CODE here !! <span class=""> ::before This is a tag </span> <- TAG CODE here!!!
<span class=""> ::before This is another tag </span>
<div class="tag-input-wrapper" data-js-taginputfieldwrapper="">
<div data-name="tagInput" data-subview="tagInputField">
<div data-js="editor-wrapper" class="editor-wrapper" style="position: relative;">
Right now, my tool is injecting the necessary HTML to create dynamic spans and add new tags. I can see my "injected" tags in the webpage but when I submit the post the "injected" tags do not appear in the live post.
Since I'm able to see the "injected tags" shouldn't I be able to see them too when my post is submitted and live ? Am I using the wrong approach to achieve what I want?
Thank you in advance !

Trying to set ng-class of AngularJS accordion-heading does nothing

I have an accordion where some of the entries need to have a heading that emphasizes that the data in that group shows a problem that needs attention. I tried using a "accordion-heading" with a "ng-class" for "has-error" (from bootstrap) that is conditional on the method that determines whether there is something that needs attention. I've tried several variations of this, and the "class" attribute never gets rendered in the HTML.
This is an excerpt from my HTML:
<accordion close-others="false">
<div ng-repeat="(name, dataSource) in dataSourceMap">
<accordion-group>
<accordion-heading>
<span ng-class="{'has-error': anyFailuresInList(dataSource)}">
{{name}}
</span>
</accordion-heading>
{{anyFailuresInList(dataSource)}}
</accordion-group>
</div>
</accordion>
The example in the documentation at enter link description here indicates that this should be possible, even though the example is a little broken (it appears to put the class on an empty "i" element).
accordion-group doesn't support ng-class well.
Please use class instead.
If you want to set the style conditionally, you can use the ? operator. For instance:
<uib-accordion-group class="{{isSpecial ? 'special-style':''}}">
This can be done by applying a css class to the group instead of the header directly
<div accordion-group is-open="node.active" is-disabled="node.active" ng-class="{'panel-active': node.active}" ng-repeat="(key,node) in nav.nodes">
<div accordion-heading >{{node.title}}</div>
</div>
Then in your css change the back for the first DIV
.panel-active>div {
background-color: #YourActiveColor;
border-color: #YourActiveColor;
}

How do I find a specific child element using javascript

I've just started using javascript and am trying to do the following:
My html doc contains divs and span elements like below.
I want to create a variable which will store the value of my-new-id for a specific div child element.
The only information I have to go on, is that I always know what the span text will be cause it's based on a username.
Therefore, how would I get the value of my-new-id for user1?
I have already figured out how to navigate to the correct div elemenet using the document.getElementById method. I then try to use a jquery selector such as :contains, but get stuck.
Many thanks on advance.
<div id=1>
<span my-new-id=x>user1</span>
<span my-new-id=y>user2</span>
<span my-new-id=z>user3</span>
</div>
<div id=2>
<span my-new-id=x>user10</span>
<span my-new-id=y>user1</span>
<span my-new-id=z>user30</span>
</div>
Using jQuery:
var val = $('span:contains("user1")').attr('my-new-id');
A couple of additional points:
Do not use IDs that begin with a number. This is not allowed in the HTML4 spec, and can cause unexpected behavior in some browsers. Instead, prefix your ID's with an alphabetic string, like this:
<div id="container1">
...
</div>
I would recommend that you use data-* attributes instead of making up non existent attributes. You can make data attributes like this:
<span data-new-id="x">user1</span>
You can then retrieve this value using:
$('span:contains("user1")').data('newId');
Note that the attribute name has been stripped of dashes and camel-cased.

Is is possible to delete Component HTML Content with JSF

hi i have HTML content like:
<div id="j_idt33:summary">
<ul id="j_idt33:summary2" class="summary">
<li style="margin-right: 85%; Color:red;">Some Error Message.</li>
</ul>
</div>
i want when the user click on a button to clear all the contents of that DIV to get output like:
<div id="j_idt33:summary">
</div>
is it possible to do something like that with JSF ? or achieve that with JavaScript ? what do you suggest guys ?
please advise.
In JavaScript side, you could do something like this:
document.getElementById("j_idt33:summary").innerHTML = "";
Or when you're using jQuery:
$("#j_idt33\\:summary").empty();
You only need to give the parent NamingContainer compnent which has a HTML representation with id="j_idt33" (I guess it's the <h:form>) a fixed ID so that the code is more robust. The generated ID may change with JSF impl/version and the component tree's state.

Categories

Resources