在Angularjs上从控制器启用/禁用按钮

Pez*_*Pez 14 javascript angularjs

我有一个HTML按钮选项,如下所示,

<button ng-class="{'primaryButton':true}" type="button" id="modalCreateBtn" "ng-hide="false" class="btn btn-group mm-btn-save primaryButton" ng-click="addSegments()">CREATE</button>
Run Code Online (Sandbox Code Playgroud)

ng-disable上面的按钮选项中没有选项.这可以通过控制器上的buttonId启用/禁用按钮吗?另外,我不想在HTML视图上添加禁用选项.相反,我想通过脚本来控制它.这可能吗?

Gab*_*hen 14

你有没有看过ngDisable?您可以拥有ngModel并从控制器更改它.就像文档示例所示:

<span  ng-controller="MyController as myController">
  <label>Click me to toggle: <input type="checkbox" ng-model="myController.checked"></label><br/>
  <button ng-model="button" ng-disabled="myController.checked">Button</button>
</span>
Run Code Online (Sandbox Code Playgroud)

和JS:

angular.module('controllerAsExample', [])
  .controller('MyController ', function(){
      this.checked = false;
 //   this.checked = true;
  });
Run Code Online (Sandbox Code Playgroud)


Alh*_*k A 11

使用ng-disabled是启用/禁用按钮的最佳实践,但您也可以在控制器中实现它,而无需disabled使用此脚本向HTML视图添加属性,

angular.element(document.getElementById('yourButtonId'))[0].disabled = true;

在你的情况下,

angular.element(document.getElementById('modalCreateBtn'))[0].disabled = true;

Plunker

希望这可以帮助!

  • 不会对我有用,这令人困惑,因为它适用于Plunker.看看angular.element doc - "如果jQuery可用,angular.element是jQuery函数的别名.如果jQuery不可用,angular.element委托给Angular的jQuery内置子集,称为"jQuery lite"或" jqLit​​e."所以对于没有使用JQuery的人来说,.disable不是jqLit​​e中的方法.对我有用的是.attr('disabled',true),因为.attr()是jqLit​​e中的一个方法, (3认同)