22
Ho creato un ul e desidero impostare la classe solo sul primo elemento li.Angular2 come impostare il nome della classe dell'elemento quando si utilizza ng-for, solo sul primo elemento
Voglio impostare il class="active" solo sul primo li. Ottengo l'indice nell'attributo della classe, ma non è quello che voglio.
import { Component, View, NgFor,Inject,forwardRef,Input, NgIf, FORM_DIRECTIVES } from 'angular2/angular2';
@Component({
selector: 'tabs'
})
@View({
template: `
<ul>
<li *ng-for="#tab of tabs;#index = index" class="{{index}}" (click)="selectTab(tab)">{{tab.tabTitle}}</li>
</ul>
<ng-content></ng-content>
`,
directives: [NgFor]
})
export class Tabs {
get tabs() {
return this._tabs;
}
set tabs(value) {
this._tabs = value;
}
private _tabs;
constructor() {
console.log("ctor.Tabs");
this._tabs = [];
}
selectTab(tab) {
this._tabs.forEach((tab) => {
tab.active = false;
});
tab.active = true;
}
addTab(tab: Tab) {
if (this._tabs.length === 0) {
tab.active = true;
}
else {
tab.active = false;
}
this._tabs.push(tab);
}
}
@Component({
selector: 'tab',
properties: ['tabTitle: tab-title']
})
@View({
template: `
<div [hidden]="!active" [class]="active">
<ng-content/>
</div>
`
})
export class Tab {
@Input() index: number;
constructor(@Inject(forwardRef(() => Tabs)) tabs: Tabs) {
console.log("ctor.Tab") ;
tabs.addTab(this);
console.log(tabs);
}
get active() {
return this._active;
}
set active(value) {
this._active = value;
}
private _active;
}
'[class.active] =" indice == 0 "' –
@Eric - Perfetto. Grazie. (fagli una risposta) – jeff
Oh, ok, subito :) –