使用 AngularJS 禁用按钮答案

【问题标题】：Disable button using AngularJS使用 AngularJS 禁用按钮
【发布时间】：2021-02-09 04:17:30
【问题描述】：

当文本中没有一个或多个标签时，我正在使用以下功能禁用按钮：

$scope.btnSendAll = function() {
    const description = $('#email_campaign_description');
    const tags = ('[nome]',
      '[consumer_current_points]',
      '[desconto]',
      '[vendor_name]',
      '[vendor_min_points]',
      '[consumer_registration_link]',
      '[min_purchase_for_discount]',
      '[max_discount_percentage]',
      '[transaction_points]',
      '[vendedor]');
    return !description.val().match(tags);
  }

标签被插入到文本区域并在您单击按钮时发送：

<button class="send to_all" data-toggle="modal" data-target="#confirmation_modal" ng-disabled="btnSendAll()"> Enviar para todos <%= image_tag 'ajax_loader.gif', 'class': 'sending hide' %> </button>

问题是此功能仅在您单击文本字段外时有效，因此它会检查是否有标签并在否定的情况下禁用我的按钮，但是如果我将光标保持在文本字段中而不单击在它之外，我的功能没有执行。

有人可以帮助我实时离开这个功能，每当我输入任何内容时，我的功能都会检查标签，而无需在我的文本字段之外单击。

【问题讨论】：

你确定函数没有执行？也可能是 description.val() 仍然包含旧值。这就是为什么通常使用 ng-model 来获取文本字段的值

标签： javascript jquery angularjs

【解决方案1】：

你确定函数没有执行吗？也可能是 description.val() 仍然包含旧值。这就是为什么通常使用ng-model 来获取文本字段的值的原因。甚至，ng-change。

function ctrl($scope) {
  $scope.btnSendAllEnabled = false;
  $scope.textAreaValue = "";
  $scope.btnSendAll = function() {
    const tags = [
      '[nome]',
      '[consumer_current_points]',
      '[desconto]',
      '[vendor_name]',
      '[vendor_min_points]',
      '[consumer_registration_link]',
      '[min_purchase_for_discount]',
      '[max_discount_percentage]',
      '[transaction_points]',
      '[vendedor]'
    ];
    $scope.btnSendAllEnabled = tags.some(function(t) {
      console.log(t, $scope.textAreaValue, $scope.textAreaValue.includes(t));
      return $scope.textAreaValue.includes(t);
    });
  }
}

angular.module("app", [])
  .controller("ctrl", ctrl);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <button class="send to_all" data-toggle="modal" data-target="#confirmation_modal" ng-disabled="!btnSendAllEnabled">
    Enviar para todos
  </button>
  <textarea id="email_campaign_description" ng-model="textAreaValue" ng-change="btnSendAll()">
  </textarea>
</div>

【讨论】：