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

Question

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

这是角度代码：

app.controller('DemoCtrl', DemoCtrl);
function DemoCtrl($timeout, $q, $log) {
    var self = this;
    self.simulateQuery = false;
    self.isDisabled = false;
    self.states = loadAll();
    self.querySearch = querySearch;

    function querySearch(query) {
        var results = query ? self.states.filter(createFilterFor(query)) : self.states,
                deferred;
        if (self.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () {
                deferred.resolve(results);
            }, Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }
    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) {
            return (state.value.indexOf(lowercaseQuery) != -1);
        };
    }
    function loadAll() {
        return totlaTablaeau.map(function (repo) {
            repo.value = repo.address.toLowerCase();
            return repo;
        });

    }
};

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'，标题：'defalt'，名称：'你的名字'};