Question

In my angular app i have a flag icon using the code:

<i ng-click="detail.flag()" class="fi-flag"></i>

I also have a boolean variable that I'd like to use to disable this.

I've tried the following to no avail:

<i ng-disabled="showDuplicate" ng-click="detail.flag()" class="fi-flag"></i>

and

<div ng-disabled="showDuplicate"><i ng-click="detail.flag()" class="fi-flag"></i></div>

Any ideas why they dont work?

Thanks.

Answer 1

ngDisabled - 如果ngDisabled中的表达式计算为真值，则此指令在元素上设置禁用属性。

可以接收已停用属性的元素包括<button>，<input>，<textarea>，<optgroup>，<option>和{{ 1}}。

这就是为什么它不适用于<fieldset>（或<i>）元素。

Answer 2

DEMO

正如其他人所提到的，ng-disabled仅适用于某些标签。我假设您想要在变量为false时禁用单击元素，您可以这样做

<i ng-click="showDuplicate && detail.flag()" class="fi-flag"></i>

这称为短路表达式，如果showDuplicate为真，则下一个术语将被评估为detail.flag()如果为假，则不会继续评估自{{1仍然是false && true所以它不会打扰评估下一个术语

虽然如果禁用某些内容，你应该为元素设置样式，所以你应该添加一个类，它说它被禁用并相应地设置它

false

在你的css中：

<i ng-class='{disabled: showDuplicate}' ng-click="showDuplicate && detail.flag()" class="fi-flag"></i>

Answer 3

答案是正确的，你不能使用带有icon html标签的ng-disable。我尝试过这样的事情：

<div ng-controller="DemoController as detail">

  <i ng-disabled="detail.showDuplicate" ng-click="detail.flag()" class="fa fa-flag">test</i>
  <button ng-disabled="detail.showDuplicate" ng-click="detail.flag()" class="fa fa-flag"></button>

</div>

https://plnkr.co/edit/0DBXJ4o9hmdtep8PM4Wc?p=catalogue

我希望它有所帮助。

Angular - Should ngDisabled work on any HTML item?

3 个答案: