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

【问题标题】：How to keep a total between AngularJS Components in ngRepeat如何在 ngRepeat 中保持 AngularJS 组件之间的总数
【发布时间】：2016-11-29 12:12:39
【问题描述】：

问题出在 - 可以为用户分配有限数量的许可证，当可用数量为 0 时，不能再分配，其他按钮将被禁用。可以删除和重新分配许可证。

用户列表在一个 ngRepeat 循环中，分配/删除许可功能在一个组件中。当我单击分配/删除按钮时，它会更新自身和总数，但其他组件中的按钮在下次单击之前不会更新。

这是我目前所拥有的完整代码：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: '<'
  }

});

【问题讨论】：

标签： javascript angularjs angularjs-components

【解决方案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>`

使用 extendend 语法：ng-disabled="$ctrl.qty <= 0 && !$ctrl.hasLicence" 仅在“免费许可证”变量为

更新Plunkr

【讨论】：

太棒了，谢谢。这正是我想要实现的目标

【解决方案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

【讨论】：

非常感谢！我想避免注入 $scope （应该把它放在我的问题中）