I have a code to render my value
<div >{`${t('single:yes')}: ${value}`}</div>
but i need to put a span between the value, for example:
<div >{`${t('single:yes')}:<span> ${value}<span>`}</div>
but dont work, what is the wrong?
I think u want the code show like this?
before
<div >{`${t('single:yes')}:<span> ${value}<span>`}</div>
after
<div >{t('single:yes')}:<span> {value}</span></div>
Trying to get the text inside my div:
<div class="ng-scope ng-binding">
Hello this is it!
</div>
In my jasmine script I have (using xpath):
var helloTxt=driver.findElement(by.xpath('//*[#id="top"]/div/div/div[3]/div[2]/div/div[1]/div[1]/div/div'));
expect(helloTxt.getText()).toBe('Hello this is it!');
the code looks like this:
<div class="container">
<div data-ng-repeat="message in getMessages() track by $index">
{{message}}
</div>
</div>
How can I check get the messages in {{message}}?
Is there another way to access this div without using xpath? Or how can I fix this?
Target all messages available inside the container
var messageElms = $('.container').all(by.binding('message'));
Assuming you expect only 1 message:
expect(messageElms.count()).toBe(1);
Assuming you expect that Hello to be the first message:
expect(messageElms.get(0).getText()).toEqual('Hello this is it!');
I have an element:
<div class="wrapper" > ... </div>
I know I can use angular to apply a class conditionally:
<div ng-class="{'wrapper-big': style.big}" > ... </div>
But I want to keep a static class and add 'big' using angular.
Desired output:
<div class="wrapper big" > ... </div>
So the class big is what I want to conditionally add.
you can use the class and ng-class attributes together.
<div class="wrapper" ng-class="{'big': /*CONDITION*/}" > ... </div>
use the array syntax of ng-class.
e.g.
<div ng-class="[style1, style2, style3]" > ... </div>
Here is an example - https://docs.angularjs.org/api/ng/directive/ngClass
I think some sample code can explain my purpose.
Some html code with angular:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button ng-repeat="button in buttons">{{button}}</button>
</div>
</div>
You can see there is a custom directive "show-result-as-text" which I want to define. It should render the inner html code with angular directives, then show them as text.
The final html should be:
<div ng-init="buttons=['add','edit','delete']">
<div show-result-as-text>
<button>add</button>
<button>edit</button>
<button>delete</button>
</div>
</div>
And when the buttons value changes, the escaped html should also be changed.
I've tried to write one myself, but failed after 2 hours of work.
UPDATE
A live demo: http://plnkr.co/edit/fpqeTJefd6ZwVFEbB1cw
The closest thing I could think of is exemplified here: http://jsfiddle.net/bmleite/5tRzM/
Basically it consists in hiding the src element and append a new element that will contain the outerHTML of each src child.
Note: I don't like the solution but it works, so I decided to share it...
I am quite used to seeing
div.class1
and
#someId.class1
but what about
.class1.class2
? And I think it is identical to
.class2.class1
? Because there was an element with id someId but now we have two elements of this type showing on the page, so I want to add a class and use the class instead of id, therefore the .class1.class2 instead of #someId.class1
It will select items with both classes. So not items with either one.
<span class="class1 class2"></span>
Yes, it is both legal and common. In the element, you would have something like this:
<div class="class1 class2">Hello</div>
It's nice for syntactic styling. To give you an example, let's say you have the following html:
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
You can add a second (and third, forth, etc.) class that modifies "box". For example:
<div class="first odd box">
</div>
<div class="second even box">
</div>
<div class="third odd box">
</div>
<div class="fourth even box">
</div>
Then, in styling, to style different box groups, you can do the following:
.odd.box {
}
.first.box, .fourth.box {
}
.first.box, .even.box {
}
This will be interpreted by the browser if you give your element does two class:
.class1.class2{width:500px;height:300px;}
<div class="class1 class2"> </div>
If you do like this, it will not be interpreted, resulting on a div with no styles:
.class1.class2{width:500px;height:300px;}
<div class="class2"> </div>
This will be interpreted (resulting on an element with a dimension of 500px X 300px:
.class1 {width:500px;}
.class2 {height:300px;}
<div class="class1 class2"> </div>
The common use of css, is to tell the browser that a certain element with and ID or CLASS of a certain name will get a set of styles, or tell the browser that a certain ID or CLASS will get a set of Styles, like so:
Ex 1:
.class1 {width:500px;} -> elements
with this class will get 500px of
width.
Ex 2:
div.class1 {width:500px;}
-> only a
div element with this class will get
500px of width.
Ex 3:
div.class1, h1.class1 {width:500px;}
-> only a div and a h1 element with this class will get 500px of width.
You can read valid information about css at:
W3C CSS SYNTAX PAGE
Just wanted to confirm the answer given by Jouke van der Maas,
which is the right answer. I would like to quote the following
excerpt from the CSS 2.1 specification:
5.2 Selector syntax
A simple selector is either a type selector or universal selector
followed immediately by zero or more attribute selectors, ID
selectors, or pseudo-classes, in any order. The simple selector
matches if all of its components match. [snip]
Since the .classname selector is equivalent to the [class="classname"] selector,
it is an attribute selector. Note the "in any order" bit. Hence the selector
.class1.class2
is identical to the selector
.class1.class2
and matches both elements like
<span class="class1 class2">Hello World</span>
as well as
<span class="class2 class1">Hello World</span>
which is the same thing, as well as
<span class="class1 class2 class3">Hello World</span>
etc...
You can also get even more fancy.