CODEWITHSUNDEEP
angularjsangular-material
Farshid
Farshid

Reputation: 518

Change selected value in md-autocomplete in angular material

I using md-autocomplete in my page, Now I need to edit a record, how to change selected value in md-autocomplete programmatically?

This is angular code:

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;
        });

    }
};

Upvotes: 4

Views: 12563

Answers (2)

Harish Verma
Harish Verma

Reputation: 556

Your Html template looks like this. 

<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>

Your controller code

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'};

Upvotes: 0

camden_kid
camden_kid

Reputation: 12813

Here's a CodePen using the online docs example. You just need to set the value of md-selected-item.

Markup

<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"
    };
}

Upvotes: 7

Related Questions