How do I set the disabled property of a button using Dart Web UI?

Question

Is there a way to disable a button based on the state of my view model?

In AngularJS:

    <button class="btn" ng-click="Search()" ng-hide="canRefresh()" ng-disabled="query.trim().length == 0">
      <i class="icon-search"></i> Search</button>

How do I do this with Dart's Web UI package?

(credit to John Saturnus for the question)

Everyway

Answer 1

Yes - we made it such that using a binding directly in the 'disabled' attribute does what you want. So you can write:

<button .... disabled="{{length == 0}}"> ... </button>

Note that this only works if you are using a data-binding, using 'disabled="false"' will still show the button in a disabled state. You can read some additional details in the discussion about "boolean attributes" here: http://www.dartlang.org/articles/dart-web-components/spec.html#binding-in-attributes

(credit to Siggi Cherem for the answer)

Everyway

Yep, there's an example of this in my codelab in step05: github.com/dart-lang/web-ui-code-lab – Passim

It seems that this does not work anymore. The dom contains the double quote: disabled="false". Any other solution? – Attenuant

@Attenuant Web UI is deprecated. Have you tried using Polymer.dart ? dartlang.org/polymer-dart – Everyway