如何在 ngRepeat 中保持 AngularJS 个组件之间的总数

Question

问题来了 - 可以分配给用户的许可证数量有限，当可用数量为 0 时，将无法再分配，其他按钮将被禁用。可以删除和重新分配许可证。

用户列表在一个ngRepeat循环中，assign/remove license函数在一个组件中。当我单击分配/删除按钮时，它会更新自身和总数，但其他组件中的按钮直到下一次单击才会更新。

这是我目前拥有的完整代码：http://plnkr.co/edit/T4soR8qpSAzY0cANknsE?p=preview

HTML:

<body ng-controller="RootController as root">
    <pre>qty: {{ root.qtyAvailable }} / {{ root.qtyMax }}</pre>
    <div ng-repeat="user in root.users | orderBy: 'firstname' ">
      {{ user.firstname }}
      <assign 
        has-licence="user.hasLicence" 
        reassignable="user.reassignable"
        qty="root.qtyAvailable"
        qty-max="root.qtyMax"
      ></assign>
    </div>
</body>

控制器和组件：

.controller('RootController', function() {
  this.qtyMax = 2;
  this.qtyAvailable = 1;

  this.users = [
    {firstname: 'john', hasLicence: false, reassignable: true},
    {firstname: 'jane', hasLicence: false, reassignable: true},
    {firstname: 'joey', hasLicence: false, reassignable: true},
    {firstname: 'bob', hasLicence: true, reassignable: true},
  ];

})

.component('assign', {
  template: `<button ng-click="$ctrl.click($ctrl.hasLicence)">{{ $ctrl.text }}</button>`,
  controller: function() {
    this.text = '';

    // set the button text
    this.buttonText = function() {
      if(this.hasLicence) {
        this.text = 'remove';
      }
      else if(!this.hasLicence && this.reassignable && this.qty>0) {
        this.text = 'assign';
      }
      else {
        this.text = '-'; // eg button disabled
      }
    }

    this.buttonText();

    // click function
    this.click = function(licence) {
      if(licence === true) {
        this.hasLicence = false;
        this.qty++
      }
      else if(this.qty>0) {
        this.hasLicence = true;
        this.qty--
      }
      this.buttonText(this.hasLicence);
      console.log(this.qty)
    }

  },
  bindings: {
    hasLicence: '<',
    reassignable: '<', // not relevant for this demo
    qty: '=',
    qtyMax: '<'
  }

});

Answer 1

像这样：

  template: `<button ng-disabled="$ctrl.qty <= 0 && !$ctrl.hasLicence" ng-click="$ctrl.click($ctrl.hasLicence)">{{ $ctrl.text }}</button><span ng-if="$ctrl.qty <= 0 && !$ctrl.hasLicence">No licenses are free</span>`

使用扩展语法：ng-disabled="$ctrl.qty <= 0 && !$ctrl.hasLicence" 仅在 'free licenses' var <= 0 时禁用添加许可证的按钮。

已更新 Plunkr

Answer 2

如果你想专门执行 buttonText() 函数，你可以在 qty 变量上添加一个监视并执行它：

.component('assign', {
  template: `<button ng-click="$ctrl.click($ctrl.hasLicence)">{{ $ctrl.text }}</button>`,
  controller: function($scope) { // $scope injection here

    ...

    // Note: you can use arrow functions to omit the assignment of context
    var me = this;
    $scope.$watch(function() {
      return me.qty;
    }, function() {
      me.buttonText();
    });

  },
  bindings: {
    ...
  }

});

此处更新了 plunker：plunkr

如何在 ngRepeat 中保持 AngularJS 个组件之间的总数

How to keep a total between AngularJS Components in ngRepeat

javascript

angularjs

angularjs-components