Question

问题在于 - 可以为用户分配有限数量的许可证，当可用数量为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: '<'
  }

});

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>`

使用extendend语法：ng-disabled="$ctrl.qty <= 0 && !$ctrl.hasLicence"仅用于在“免费许可证”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

2 个答案: