Angularjs addmore指令和范围管理

Question

我正在尝试创建一个带有添加更多按钮的指令。

在控制器中我有一个 tickets 对象，它是空的。我试图在单击 "Add Tickets".

时向此对象添加新票证（多张）

我需要的是

每张票应加1。
当 price 是在输入框中更新（双向绑定）。
应该能够从控制器或指令更新 quantity 应该更新数量输入（单向绑定）。

我已经创建了一个 plunker ，任何帮助将不胜感激，我已经在这方面花费了大量时间。

Answer 1

带有组件的精美解决方案

我用组件版本分叉了你的 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
      });
    }
  }
});

如果你想要一个带指令的版本，现在就让我来吧。

Angularjs addmore指令和范围管理

Angularjs addmore directive and scope management

angularjs

angularjs-directive

angularjs-scope

带有组件的精美解决方案

门票组件

工单组件