Question

我需要根据{{product.Availability}}禁用ons按钮，如果它是“缺货”，我需要禁用ons按钮。我该如何解决呢？我正在使用Onsen-UI框架。

<div>
...
<tr><td align="left">Availability:</td><td align="left">{{product.Availability}}</td>
...
</div>
<ons-button modifier="large--cta">Add to Cart</ons-button>

任何帮助将不胜感激。谢谢你们。

Answer 1

对于普通表单元素ng-disabled可用于禁用它们，但<ons-button>标记不会实现ng-disabled，但我们可以使用ng-attr-disabled代替<ons-button ng-attr-disabled="{{ disabled }}">Button</ons-button> <input type="checkbox" ng-model="disabled">。喜欢这个

ng-disabled

选中复选框后，该按钮将被禁用。 <div> ... <tr><td align="left">Availability:</td><td align="left">{{product.Availability}}</td> ... </div> <ons-button modifier="large--cta" ng-attr-disabled="{{ product.Availability === 'Out of Stock' }}">Add to Cart</ons-button>属性将添加到Onsen UI的下一个版本中。

在你的情况下你可以做到

{{1}}

我做了一个小例子：http://codepen.io/argelius/pen/bNwWQz

Answer 2

您可以检查您的模型是否与ng-disabled中的特定字符串匹配，

<div>
...
<tr><td align="left">Availability:</td><td align="left">{{product.Availability}}</td>
...
</div>
<ons-button modifier="large--cta" ng-disabled="product.Availability=='Out of Stock'">Add to Cart</ons-button>

如果product.Availability == Out of Stock

的值，这将禁用该按钮

这是一个演示http://jsfiddle.net/HB7LU/9480/

根据产品可用性禁用按钮

2 个答案: