angular-material-npfixed/src/components/autocomplete/demoInsideDialog/dialog.tmpl.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<md-dialog aria-label="Autocomplete Dialog Example">

  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>Autocomplete Dialog Example</h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="ctrl.cancel()">
        <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-dialog-content ng-cloak>
    <div class="md-dialog-content">
      <form ng-submit="$event.preventDefault()">
        <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
        <md-autocomplete
            md-selected-item="ctrl.selectedItem"
            md-search-text="ctrl.searchText"
            md-items="item in ctrl.querySearch(ctrl.searchText)"
            md-item-text="item.display"
            md-min-length="0"
            placeholder="What is your favorite US state?"
            md-autofocus="">
          <md-item-template>
            <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
          </md-item-template>
          <md-not-found>
            No states matching "{{ctrl.searchText}}" were found.
          </md-not-found>
        </md-autocomplete>
      </form>
    </div>
  </md-dialog-content>

  <md-dialog-actions>
    <md-button aria-label="Finished" ng-click="ctrl.finish($event)">Finished</md-button>
  </md-dialog-actions>
</md-dialog>