Question

我在页面中使用md-autocomplete，现在我需要编辑一条记录，如何以编程方式更改md-autocomplete中的选定值？

这是角度代码：

Xor.left

Answer 1

以下是使用在线文档示例的CodePen。您只需设置md-selected-item。

的值

标记

<md-autocomplete ... md-selected-item="ctrl.selectedItem" ...></md-autocomplete>

...

<md-button class="md-raised md-primary" ng-click="ctrl.selectArkansas()">Select Arkansas</md-button>

JS

self.selectArkansas = function() {
  self.selectedItem = {
      value: "Arkansas".toLowerCase(),
      display: "Arkansas"
    };
}

Answer 2

您的HTML模板如下所示。

<md-autocomplete
  md-selected-item="model"
  md-search-text="search_text"
  md-items="item in searchResults()"
  md-item-text="item.title"
  md-min-length="3"
  md-floating-label="Your Label"
  placeholder="placeholder"
  >
  <md-item-template>
      <span> {{item.title}},{{item.name}}</span>
  </md-item-template>
  <md-not-found>
    No matches found.
  </md-not-found>
</md-autocomplete>

您的控制器代码

class Controller {
  constructor($service) {
    this.$service = $service;
  }
  //we are init the varible hare.
  $onInit() {
    this.search_text = "";
    //set by defaut value in you auto complete.   
    this.model = {id:'0000',title:'defalt',name:'Your Name'};
  }
 }
  //function for get data list
  // $service this is service function we can define in over services file and we can inject this way   
  searchResults() {
    let {  $service, search_text } = this;
    return $service.search(search_text).then((data) =>data.list).catch(err =>{ });
  }  
     //Responce data look like this
     //[{id:'00h1',title:'test1',name:'harish verma'}, 
     //{id:'00h2',title:'test1',name:'harish verma'}, 
     //{id:'00h3',title:'test1',name:'harish verma'}, 
     //{id:'00h4',title:'test1',name:'harish verma'}];
}

Controller.$inject = [
  "Service"
];

export default Controller;


set by defaut value in you auto complete.

this.model = {id：'0000'，title：'defalt'，name：'Your Name'};

更改角度材质中md-autocomplete中的选定值

2 个答案: