Angular Material Autocomplete标签占位符toogle

时间:2016-06-07 10:39:58

标签: angular-material

由于配置不同,我必须编写两次相同的自动完成功能。唯一的区别是一个使用md-floating-label和另一个占位符。有没有办法只实现一个自动完成,由于某个值而决定使用其中一个?

我尝试实现自定义属性指令。结果angular无法编译模板并崩溃。

以下示例显示了我当前的代码:

 <md-autocomplete
      ng-disabled="ctrl.isDisabled"
      md-no-cache="ctrl.noCache"
      md-selected-item="ctrl.selectedItem"
      md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
      md-search-text="ctrl.searchText"
      md-selected-item-change="ctrl.selectedItemChange(item)"
      md-items="item in ctrl.querySearch(ctrl.searchText)"
      md-item-text="item.name"
      md-min-length="0"
      placeholder="Pick an Angular repository"             
      md-menu-class="autocomplete-custom-template"
      ng-if="!ctrl.showAsLabel">
    <md-item-template>
      <span class="item-title">
        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
        <span> {{item.name}} </span>
      </span>
      <span class="item-metadata">
        <span class="item-metastat">
          <strong>{{item.watchers}}</strong> watchers
        </span>
        <span class="item-metastat">
          <strong>{{item.forks}}</strong> forks
        </span>
      </span>
    </md-item-template>
  </md-autocomplete>

 <md-autocomplete
      ng-disabled="ctrl.isDisabled"
      md-no-cache="ctrl.noCache"
      md-selected-item="ctrl.selectedItem"
      md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
      md-search-text="ctrl.searchText"
      md-selected-item-change="ctrl.selectedItemChange(item)"
      md-items="item in ctrl.querySearch(ctrl.searchText)"
      md-item-text="item.name"
      md-min-length="0"
      md-floating-label="Pick an Angular repository"
      md-menu-class="autocomplete-custom-template"
      ng-if="ctrl.showAsLabel">
    <md-item-template>
      <span class="item-title">
        <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
        <span> {{item.name}} </span>
      </span>
      <span class="item-metadata">
        <span class="item-metastat">
          <strong>{{item.watchers}}</strong> watchers
        </span>
        <span class="item-metastat">
          <strong>{{item.forks}}</strong> forks
        </span>
      </span>
    </md-item-template>
  </md-autocomplete>

0 个答案:

没有答案