javascript - 为什么 ng-disabled 在按钮上不起作用?

标签 javascript angularjs angularjs-directive angularjs-scope

我的 Plunkr:http://plnkr.co/edit/4MkenJPczFbxy5aoillL?p=preview

enter image description here

<body ng-controller="mainCtrl as main">

<h1>Hello Plunker!</h1>
<p>Button should not be disabled:</p>

<div ng-init="main.btnDisabled = false">
    <button ng-model="main.my_button"
         ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
         disabled="main.btnDisabled"
         type="button"
         class="btn btn-info btn-sm switch-btn">My Button</button>  
</div>

Angular

angular.module('app').controller('mainCtrl', function($scope) {
  vm = this;
  vm.btnDisabled = false;
});

我找到了 this answer here ,但它在我的示例中不起作用。

最佳答案

该按钮被禁用,因为有 disabled 属性。这足以让浏览器知道该元素必须处于非事件状态。 disabled attribute 的值无关紧要,它可以是任何值。

这正是 Angular 提供 ngDisabled 的原因指令,当表达式计算为 true 时添加 disabled 属性,当它为 false 时删除。

在你的情况下你应该使用

<button ng-model="main.my_button"
        ng-class="{ 'btn-success' : !tc.switching, 'btn-disabled' : tc.switching }"
        ng-disabled="main.btnDisabled"
        type="button"
        class="btn btn-info btn-sm switch-btn">My Button</button>  

关于javascript - 为什么 ng-disabled 在按钮上不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29176192/

相关文章:

javascript - Angular JS 组件绑定(bind)不适用于 IE11 上的按钮类型

触发自定义验证指令后,AngularJS ng-model 值丢失

javascript - 使用 javascript 禁用输入文本直到函数完成的方法

javascript - 导入/导出声明可能只出现在模块的顶层

javascript - 自动调整文本输入宽度时防止抖动

javascript - Angular 中唯一的过滤选择列表仅返回数据集中的单个项目

angularjs - Angular 验证 : Rollback ngModel. $modelValue 更新?

javascript - 任何人都可以提供一个 angularjs 设置的示例,该示例轮询数据并在收到数据时更新 UI 吗?

javascript - 如何为 CoffeeScript 设置 PHPStorm 文件观察器

javascript - 正在寻找一种使用 Google Apps 脚本或 DOCS API 向 Google 文档中的段落添加边框的方法?