Angularjs 1.x를 사용하면 버튼 클릭으로 편집 / 읽기 전용 모드간에 HTML 템플릿을 쉽게 전환 할 수 있습니다. ng-include 지시문이 핵심이었습니다.
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="contact in model.contacts" ng-include="getTemplate(contact)">
</tr>
</tbody>
</table>
get getTemplate 함수는 다음 코드를 실행합니다.
$scope.getTemplate = function (contact) {
if (contact.id === $scope.model.selected.id) return 'edit';
else return 'display';
};
이는 다시 해당 템플릿 중 하나가 UI에서 활성화되도록합니다.
디스플레이
<script type="text/ng-template" id="display">
<td>{{contact.name}}</td>
<td>{{contact.age}}</td>
<td>
<button ng-click="editContact(contact)">Edit</button>
</td>
</script>
편집하다
<script type="text/ng-template" id="edit">
<td><input type="text" ng-model="model.selected.name" /></td>
<td><input type="text" ng-model="model.selected.age" /></td>
<td>
<button ng-click="saveContact($index)">Save</button>
<button ng-click="reset()">Cancel</button>
</td>
</script>
https://jsfiddle.net/benfosterdev/UWLFJ/
Angular 2 RC 4에는 n-include가 없습니다.
Angular 2 RC4로 동일한 기능을 어떻게 수행합니까?
나는 그렇게 ngTemplateOutlet
하기 위해 지시를 활용할 것입니다.
이후의 버전 2.0.0-rc.2 (2016년 6월 15일) 컨텍스트에 첨가NgTemplateOutlet
이 기능을 사용하려고 할 수 있습니다 내에서 설명한대로 데모 plunker (업데이트 4.XX )
template.html
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th></th>
</thead>
<tbody>
<tr *ngFor="let contact of contacts; let i = index">
<ng-template [ngTemplateOutlet]="getTemplate(contact)"
[ngOutletContext]="{ $implicit: contact, index: i }"></ng-template>
</tr>
</tbody>
</table>
<ng-template #displayTmpl let-contact>
<td>{{contact.name}}</td>
<td>{{contact.age}}</td>
<td>
<button (click)="editContact(contact)">Edit</button>
</td>
</ng-template>
<ng-template #editTmpl let-i="index">
<td><input type="text" [(ngModel)]="selected.name" /></td>
<td><input type="text" [(ngModel)]="selected.age" /></td>
<td>
<button (click)="saveContact(i)">Save</button>
<button (click)="reset()">Cancel</button>
</td>
</ng-template>
component.ts
import { Component, ViewChild, TemplateRef } from '@angular/core';
interface Contact {
id: number;
name: string;
age: number
}
@Component({
....
})
export class App {
@ViewChild('displayTmpl') displayTmpl: TemplateRef<any>;
@ViewChild('editTmpl') editTmpl: TemplateRef<any>;
contacts: Array<Contact> = [{
id: 1,
name: "Ben",
age: 28
}, {
id: 2,
name: "Sally",
age: 24
}, {
id: 3,
name: "John",
age: 32
}, {
id: 4,
name: "Jane",
age: 40
}];
selected: Contact;
getTemplate(contact) {
return this.selected && this.selected.id == contact.id ?
this.editTmpl : this.displayTmpl;
}
editContact(contact) {
this.selected = Object.assign({}, contact);
}
saveContact (idx) {
console.log("Saving contact");
this.contacts[idx] = this.selected;
this.reset();
}
reset() {
this.selected = null;
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다