Thanood

<template>
  <require from="./logger"></require>
  <div class="row">
    <div class="col s12">
      <md-file md-caption="upload file" view-model.ref="fileInput" md-multiple="true" md-label-value.bind="labelValue" md-on-change.delegate="filesChanged($event)"></md-file>
      <div if.bind="selectedFiles.length > 0">
        <md-collection>
          <md-collection-item repeat.for="file of selectedFiles">
            ${file.name} (${file.size} bytes)
          </md-collection-item>

Thanood

<template>
  <md-file md-caption="upload file" view-model.ref="fileInput" md-multiple="true" md-label-value.bind="labelValue"></md-file>
  <div if.bind="selectedFiles.length > 0">
    <md-collection>
      <md-collection-item repeat.for="file of selectedFiles">
        ${file.name} (${file.size} bytes)
      </md-collection-item>
    </md-collection>
  </div>
</template>

Thanood

Getting the selected files

The view model of the <md-file> element (referenced here by view-model.ref="fileInput") contains the native files property value of the wrapped file input control. Therefore fileInput.files contains an array type FileList which can be read like the value of any native file input control. It can even be bound to a getter, enhanced with @computedFrom to avoid dirty-checking as shown in this example.

Thanood

<template>
  <p>
    <md-checkbox md-model.bind="{ id: 0, name: 'Motherboard' }" md-matcher.bind="productMatcher" md-checked.bind="selectedProducts ">
        Motherboard
    </md-checkbox>
  </p>
  <p>
    <md-checkbox md-model.bind="{ id: 1, name: 'CPU' }" md-matcher.bind="productMatcher" md-checked.bind="selectedProducts ">
        CPU
    </md-checkbox>

Thanood

<template>
  <p repeat.for="product of products ">
    <md-checkbox md-model.bind="product" md-checked.bind="selectedProducts ">
        ${product.name}
    </md-checkbox>
  </p>
  <p>
    Selected products:
    <ul>
      <li repeat.for="product of selectedProducts">${product.name}</li>

Thanood

<template>
  <div>
    <div style="margin-top: 10px;">
      Default:
      <md-switch md-checked.bind="checked"></md-switch>
      With value: ${checked | stringify}
    </div>
    <div style="margin-top: 10px;">
      Custom labels:
      <md-switch md-label-on="enabled" md-label-off="disabled" md-checked.bind="checked"></md-switch>

Thanood

<template>
  <div>
    <p>
      <md-checkbox md-checked.bind="checked" md-filled-in="true">A filled-in checkbox</md-checkbox> with value: ${checked | stringify}
    </p>
    <p>
      <md-checkbox md-disabled="true" md-filled-in="true">A disabled filled-in checkbox</md-checkbox>
    </p>
  </div>
</template>

Thanood

<template>
  <div>
    <p>
      <md-checkbox md-checked.bind="checked">A default checkbox</md-checkbox> with value: ${checked | stringify}
    </p>
    <p>
      <md-checkbox md-checked="false" md-disabled="true">A disabled checkbox</md-checkbox>
    </p>
    <p>
      <md-checkbox md-checked.bind="indeterminateChecked">An indeterminate checkbox</md-checkbox> with value: ${indeterminateChecked | stringify}

Thanood

<template>
  <md-radio repeat.for="color of colors" md-name="color" md-model.bind="color" md-checked.bind="selectedColor">${color.name}</md-radio>
  <p>Your choice: ${selectedColor | stringify}</p>
</template>

Thanood

<template>
  <div>
    <p>
      <md-radio md-name="myOption" md-value="option1" md-checked.bind="choice">Option 1</md-radio>
      <md-radio md-name="myOption" md-value="option2" md-checked.bind="choice">Option 2</md-radio>
      <md-radio md-name="myOption" md-value="option3" md-checked.bind="choice">Option 3</md-radio>
    </p>
    <p>
      Your choice: ${choice}
    </p>