Angularjs addmore指令和范围管理
Angularjs addmore directive and scope management
我正在尝试创建一个带有添加更多按钮的指令。
在控制器中我有一个 tickets
对象,它是空的。我试图在单击 "Add Tickets".
时向此对象添加新票证(多张)
我需要的是
- 每张票应加1。
- 当
price
是
在输入框中更新(双向绑定)。
- 应该能够从控制器或指令更新
quantity
应该更新数量输入(单向绑定)。
我已经创建了一个 plunker ,任何帮助将不胜感激,我已经在这方面花费了大量时间。
带有组件的精美解决方案
我用组件版本分叉了你的 plunker here。
如果可以,我建议您使用组件而不是指令。
我把它分成两个部分,这样更容易分离功能。一个组件用于列表,另一个组件用于一个项目表示。
门票组件
它处理组件上的 ng-repeat、添加按钮和求和函数。
app.component('tickets', {
template: '<div ng-repeat="ticket in $ctrl.tickets">#{{ticket.id}}<ticket ng-change="$ctrl.recompute()" assign="$ctrl.assign" ng-model="ticket"/></div><hr><button ng-click="$ctrl.addOne()">Add One</button><br>Total price : {{$ctrl.price}}<br>Total quantity : {{$ctrl.quantities}}',
controller: class Ctrl {
$onInit() {
this.tickets = [];
this.price = 0;
this.quantities = 0;
}
count() {
return this.tickets.length;
}
addOne() {
this.tickets.push({
id: this.count(),
price: 0,
color: 'red',
quantity: 1
});
this.recompute();
}
recompute() {
this.price = 0;
this.quantities = 0;
this.tickets.forEach((ticket) => {
this.price += ticket.price;
this.quantities += ticket.quantity;
});
}
assign(ticket) {
console.log("ticket Assigned : ", ticket);
}
}
});
工单组件
它处理一张票的表示和动作。
app.component('ticket', {
template: '<div><label>Quantity</label><input type="number" ng-model="$ctrl.ticket.quantity" ng-change="$ctrl.ngChange"/><br><label>Price</label><input type="number" ng-model="$ctrl.ticket.price" ng-change="$ctrl.ngChange"/><br><button ng-click="$ctrl.assignMe()">Assign</button></div>',
bindings: {
ngModel: '=',
ngChange: '<',
assign: '<'
},
controller: class Ctrl {
$onInit() {
this.ticket = this.ngModel;
}
assignMe() {
this.assign(this.ticket);
}
addOne() {
this.tickets.push({
price: 0,
color: 'red',
quentity: 0
});
}
}
});
如果你想要一个带指令的版本,现在就让我来吧。
我正在尝试创建一个带有添加更多按钮的指令。
在控制器中我有一个 tickets
对象,它是空的。我试图在单击 "Add Tickets".
我需要的是
- 每张票应加1。
- 当
price
是 在输入框中更新(双向绑定)。 - 应该能够从控制器或指令更新
quantity
应该更新数量输入(单向绑定)。
我已经创建了一个 plunker ,任何帮助将不胜感激,我已经在这方面花费了大量时间。
带有组件的精美解决方案
我用组件版本分叉了你的 plunker here。
如果可以,我建议您使用组件而不是指令。
我把它分成两个部分,这样更容易分离功能。一个组件用于列表,另一个组件用于一个项目表示。
门票组件
它处理组件上的 ng-repeat、添加按钮和求和函数。
app.component('tickets', {
template: '<div ng-repeat="ticket in $ctrl.tickets">#{{ticket.id}}<ticket ng-change="$ctrl.recompute()" assign="$ctrl.assign" ng-model="ticket"/></div><hr><button ng-click="$ctrl.addOne()">Add One</button><br>Total price : {{$ctrl.price}}<br>Total quantity : {{$ctrl.quantities}}',
controller: class Ctrl {
$onInit() {
this.tickets = [];
this.price = 0;
this.quantities = 0;
}
count() {
return this.tickets.length;
}
addOne() {
this.tickets.push({
id: this.count(),
price: 0,
color: 'red',
quantity: 1
});
this.recompute();
}
recompute() {
this.price = 0;
this.quantities = 0;
this.tickets.forEach((ticket) => {
this.price += ticket.price;
this.quantities += ticket.quantity;
});
}
assign(ticket) {
console.log("ticket Assigned : ", ticket);
}
}
});
工单组件
它处理一张票的表示和动作。
app.component('ticket', {
template: '<div><label>Quantity</label><input type="number" ng-model="$ctrl.ticket.quantity" ng-change="$ctrl.ngChange"/><br><label>Price</label><input type="number" ng-model="$ctrl.ticket.price" ng-change="$ctrl.ngChange"/><br><button ng-click="$ctrl.assignMe()">Assign</button></div>',
bindings: {
ngModel: '=',
ngChange: '<',
assign: '<'
},
controller: class Ctrl {
$onInit() {
this.ticket = this.ngModel;
}
assignMe() {
this.assign(this.ticket);
}
addOne() {
this.tickets.push({
price: 0,
color: 'red',
quentity: 0
});
}
}
});
如果你想要一个带指令的版本,现在就让我来吧。