I have a simple repeat.for:
<li repeat.for="item of items">${item}</li>
Currently I'm using: ${$parent.items.indexOf(item)}.
Is there a shorthand, something like {{$index}} in angular?
There is. Write this:
<li repeat.for="item of items">${$index} - ${item}</li>
Related
I'm trying to implement the condition provided in the code. My last attempt was like in the one in the code.
<ul class = "details" v-for = "(value, propertyName) in items[this.index]" :key = "value.id">
<li v-if="{{propertyName}} == 'IndustryIdentifiers'">Data not available</li>
<li v-else>{{value}}</li>
</ul>
How can the following be implemented:
v-if="{{propertyName}} == 'IndustryIdentifiers'"
The {{ }} syntax is used to wrap a JavaScript expression that should be output as text. It isn't necessary to use the braces to access data in other contexts. In the case of a v-if the attribute value is already an expression and there's no need to include any special characters to pull in data values.
So it'd be just v-if="propertyName === 'IndustryIdentifiers'":
<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
<li v-if="propertyName === 'IndustryIdentifiers'">Data not available</li>
<li v-else>{{ value }}</li>
</ul>
Here I'm assuming that item[this.index] is an object rather than an array, which is implied by the way you've written your loop.
You could also write it like this:
<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
<li>{{ propertyName === 'IndustryIdentifiers' ? 'Data not available' : value }}</li>
</ul>
You should also be able to remove the this. from the index unless it's also declared locally.
I also wonder whether you're intentionally creating a separate list for each value, with each list only containing a single item. Difficult to know exactly what you're trying to achieve but I would guess that you want the loop inside the <ul> rather than on the <ul>. If you only have a single <li> (as in my second example) then you could move the v-for onto the <li>. If you want to stick to having two <li> elements with v-if/v-else then you'll need to wrap them in a <template> tag to hold the v-for.
Based on the starter kit I have created a new app. I would like to link the different pages to a set of icons in the app-toolbar.
I got it working with:
<a href="/main-stream">
<paper-icon-button icon="icons:view-stream"></paper-icon-button>
</a>
But I think I am missing something here. Is there a better way?
in your app-Component you have a variable called page. This variable indicates the current view that is shown. To modify its value you can use the iron-selector like in the demo app.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
<a name="view2" href="[[rootPath]]view2">View Two</a>
<a name="view3" href="[[rootPath]]view3">View Three</a>
</iron-selector>
Copied from:https://github.com/PolymerElements/polymer-starter-kit/blob/master/src/my-app.html
I am learning angular2 using ng-book2 book and I was just playing around Built in directives.
I was reading about ngSwitch and I stumbled upon this feature where we can write multiple ngSwitchWhen with same conditions like following code:
<ul [ngSwitch]="choice">
<li *ngSwitchWhen="1">First choice</li>
<li *ngSwitchWhen="2">Second choice</li>
<li *ngSwitchWhen="3">Third choice</li>
<li *ngSwitchWhen="4">Fourth choice</li>
<li *ngSwitchWhen="2">Second choice, again</li>
<li *ngSwitchDefault>Default choice</li>
</ul>
which will output following result:
Second Choice
Second choice, again
I wrote code as below:
<div [ngSwitch]="myVar">
<div *ngSwitchWhen="myVar==1">My Var is 1</div>
<div *ngSwitchWhen="myVar==2">My Var is 2</div>
<div *ngSwitchWhen="myVar==3">My Var is 3</div>
<div *ngSwitchWhen="myVar==3">Special feature of ng Swtich</div>
<div *ngSwitchDefault>My Var is {{myVar}}</div>
</div>
which does not print output with same conditions.
I thought my code was proper but when I saw *ngSwitchWhen="myVar==3"
I found out my mistake.
But strangely it works properly except for repeated conditions
Is there any difference between these two conditions?
*ngSwitchWhen="2"
*ngSwitchWhen="myVar==3"
Which one to use?
ngSwitchWhen="2"
This expression checks the value of switchcase against the variable myVar(myVar=="6")
ngSwitchWhen="myVar==3"
Whereas this expression evaluates to myVar==(myVar==2) the value inside the parantheses return 1 if myVar is 2 and 0 if not
Hi I have problem joining two lists together before applying domConstruct.toDom.
I understand that it can be done that way ie:,
require(["dojo/text!, myListHtml.html", "dojo/domReady!"],
function(myListHtml){
var list = domConstruct.toDom(myListHtml);
});
However, i would like to know how two lists should be coded ie:-
require(["dojo/domReady!"], function(){
var list = domConstruct.toDom
('<ol>\
<li class="odd">\
<div class="bold">\
<a class="odd">Odd</a>\
</div>\
</li>\
<li class="even">\
<div class="italic">\
<a class="even">Even</a>\
</div>\
</li>\
</ol>\
<ol id="list2">\
<li class="odd">Odd</li>\
</ol>');
Please advise. Thanks in advance
Clement
Why are you trying to join the two lists? domConstruct.toDom() returns a single domNode, but what you are trying above would be two domNodes.
If you really want to "combine" them, you can nest them inside another domNode, like this:
var lists = domConstruct.toDom(
'<div>\
<ol>\
<li class="odd">\
...
</ol>\
<ol id="list2">\
<li class="odd">Odd</li>\
</ol>\
</div>');
If you want to "combine" them on the page, consider creating them separately and adding them to the page using domConstruct.place(), like this:
domConstruct.place('<ol>\
<li class="odd">\
...
</ol>', "idOfWhateverYouWantToContainIt");
domConstruct.place('<ol id="list2">\
...
</ol>', "idOfWhateverYouWantToContainIt");
I've got a map of city names => distance-from-origin.
I'd like to use a partial with this map, and create something like so:
<ul>
<li>city1: distance1</li>
<li>city2: distance2</li>
<li>city3: distance3</li>
</ul>
What is the canonical way to do this with StringTemplate?
Thanks.
<ul>
$amap.keys:{k | <li>$k$: $amap.(k)$</li>}$
</ul>