Отключить кнопку, основанную на доступности продукта

Question

Мне нужно отключить кнопку ons на основе {{product.Availability}}, если она «отсутствует на складе», мне нужно отключить кнопку 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 будет добавлен в следующую версию пользовательского интерфейса Onsen.

В вашем случае вы можете сделать

<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> 

Я сделал небольшой пример: http://codepen.io/argelius/pen/bNwWQz

Answer 2

вы можете проверить, если ваша модель соответствует к определенной строке в нг-инвалидов,

<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/