标签: md-autocomplete

我想在选择一个选项时调用一个函数.经过一些搜索,似乎我必须使用:

属性选项MdAutocompleteTrigger的 选择

在文档中: https: //material.angular.io/components/component/autocomplete optionSelections自动完成选项选择流.

我不明白,什么是流,如何实现这个？

我有这个演示中<md-autocomplete>显示的组件问题:

<md-autocomplete ng-pattern="...">不起作用.我希望如果将某些文本输入Tax字段(如zzz),则该字段将被标记为红色,因为正则表达式只接受数字[1..99] ng-pattern="/^[1-9]\d?$/".实际上required工作正常:当字段为空时,它被触发为无效.

我有一个对话框,几个字段设置,第一个字段是a md-autocomplete,当我点击确定所有这些字段都被清理,所以,我想要设置焦点为真md-autocomplete,以便再次开始填充数据.

我angular/material: 2.0.0-beta.5在Angular应用程序中使用md-autocomplete .随着最新版本的发布,该selected方法已被替换onSelectionChange.

第一次选择下拉列表中的值时,关联的方法仅触发一次,但如果我从下拉列表中选择一个新值,则会选择两次(第二次具有前一个值).

逻辑与以前的版本一起正常工作.

模板

<md-autocomplete #panel="mdAutocomplete" [displayWith]="displayFn">
   <md-option (onSelectionChange)="selected(country)" *ngFor="let country of filteredCountries | async" [value]="country">
    <div class="selector-elements">
      <span>
          <img [src]="getFlagPath(country.code)" [width]="24" [height]="24" /> 
      </span>    {{ country.name }}
      </div>
</md-option>

调节器

export class CountrySelector implements OnInit, ControlValueAccessor {

// ...

initCountries() {
    this.countryList = countryNames;

    this.filteredCountries = this.formControlName.valueChanges
        .startWith(null)  //-> OnInit the countries are filtered by null, hence all results are returned.
        .map(country => {
            return country && typeof country === 'object' …

我在我的项目中使用Angular Material组件"md-autocomplete".

我们正在尝试使用"md-list"组件的项目单击事件调用来呈现动态响应.

问题:但是,在调用事件调用之前,将调用md-autocomplete方法.

我的要求:有没有办法在调用md-autocomplete方法之前调用事件调用.

在这里,我们附上了样本图像,显示了我们作为输出所需的基本响应.

我试过下面的代码,但它没有用.我需要解决问题的方法.

HTML源代码:

md-list代码

<md-list>
    <div ng-repeat="object in ['object 1', 'object 2', 'object 3', 'object 4', 'object 5', 'object 6'] track by $index">
        <md-list-item class="md-2-line contact-item" ng-click="listItemClick($event, object)">
            <div class="md-list-item-text compact">
                <h3>Object data displayed here like object 1, object 2 and etc ...</h3>
            </div>
        </md-list-item>
    </div>
</md-list>

md-autocomplete代码:

<md-autocomplete
        ng-disabled="isDisabled"
        md-no-cache="noCache"
        md-selected-item="selectedItem"
        md-search-text-change="searchTextChangeEvent(searchText)"
        md-search-text="searchText"
        md-selected-item-change="selectedItemChangeEvent(item)"
        md-items="item in search(searchText)"
        md-item-text="item.id"
        md-min-length="0"
        placeholder="Search by id ..."
        md-menu-class="autocomplete-custom-template">
        <md-item-template>
            <span class="item-title">
                {{id}}
            </span>
        </md-item-template>
</md-autocomplete>

AngularJS脚本代码: …

我有一个角度4应用与材料设计.在这个应用程序中,我有一个带有自动填充字段的表单.

这是我的HTML代码:

<div class="form-group">
  <md-input-container>
    <input mdInput type="text" mdInput [mdAutocomplete]="project" [formControl]="projectCtrl" placeholder="Choose a project" [(ngModel)]="selectProjectForNewCollab" name="selectProjectForNewCollab">
  </md-input-container>
  <md-autocomplete #project="mdAutocomplete">
    <md-option *ngFor="let project of filteredProjects | async" [value]="project.name">
      {{ project.name }}
    </md-option>
  </md-autocomplete>
</div>

我的代码:

console.log("project = " + this.selectProjectForNewCollab);

所以,我有projects3个领域:{id: "1", name: "test", photo: "test"}.我想通过它的名字选择一个项目,但回过头来获取id.实际上,我选择了这个名字,但最后得到了名字.如果我改变了[value]="project.id",我得到了id,但它是输入中显示的id.

那么,你知道如何获取id但是按名称选择并在输入中显示名称吗？

我想在md-autocomplete上使用模糊事件,但是ng-blur和md-blur都不起作用.

$scope.unFocus = function () {
            alert('Hello!');
        }

<md-autocomplete md-no-cache="false" md-selected-item="selectedItem" md-search-text-change="searchLocation(searchText)"
                    md-search-text="searchText" md-items="item in searchResult" md-item-text="item.address"
                    md-selected-item-change="changeLocation(item)" md-min-length="0" md-floating-label="Your Address" ng-blur="unFocus()">
            <md-item-template>
                <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.address}}</span>
            </md-item-template>
            <md-not-found>
                <i>Not Found {{searchText}}</i>
            </md-not-found>
</md-autocomplete>

我们有一种情况,我们将带有md-select/md-option的md-input-container转换为md-autocomplete.在md-select/md-option中,我们能够在md-select和md-option上都有ng-disabled属性.对于md-autocomplete,我们还没有找到在选项/项级别使用ng-disabled的方法.我们在md-autocomplete上使用它,但是一旦选中它们,需要在下拉列表中禁用选项.

有没有办法使用md-autocomplete执行此操作？谢谢!

我想<md-autocomplete>在 Material AngularJS 中重置控件。

https://material.angularjs.org/latest/#/demo/material.components.autocomplete
https://material.angularjs.org/latest/#/api/material.components.autocomplete/directive/mdAutocomplete

基本上我想将其重置为初始状态。我可以访问ng-model并分配null给它。但是，它不会删除md-item-text属性中包含的显示文本。

可以请有人让我知道我该如何解决相同的问题。

我需要在特定事件上打开角度材料md-autocomplete下拉列表.有没有办法做到这一点？

我有md-autocomplete与基本设置类似于这个http://codepen.io/paucaverba/pen/GpogPv?editors=101

<div ng-controller="DemoCtrl as ctrl" layout="column" class="autocompletedemoBasicUsage" ng-app="MyApp">

  <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-item-template>
      <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
    </md-item-template>
    <md-not-found>
      No matches found for "{{ctrl.searchText}}".
    </md-not-found>
  </md-autocomplete>
  <br>
        <button class="md-button md-raised"> open </button>
</form>

如果我点击控件本身,它将打开下拉列表.当我点击"打开"按钮时,我想要相同的行为