angularjssortingmd-chip

Sorting angular md-chips


I have been looking online and I haven't found much help so far. My question is can you sort a list of md-chips when it has an autocomplete field? As an example, I created a jsfiddle (https://jsfiddle.net/reckmj/apunczkq/3/) of angular's md-chips example (https://material.angularjs.org/latest/demo/chips). I have the autocomplete field sorted already, but I can't seem to figure out the md-chips sorting.

<md-chips ng-model="ctrl.selectedVegetables" md-autocomplete-snap="" md-transform-chip="ctrl.transformChip($chip)" md-require-match="ctrl.autocompleteDemoRequireMatch">
  <md-autocomplete md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText) | orderBy:'name'" md-item-text="item.name" placeholder="Search for a vegetable">
    <span md-highlight-text="ctrl.searchText">{{item.name}} :: {{item.type}}</span>
  </md-autocomplete>
  <md-chip-template>
    <span>
      <strong>{{$chip.name}}</strong>
      <em>({{$chip.type}})</em>
    </span>
  </md-chip-template>
</md-chips>

Solution

  • I've updated your JSFiddle. I've added onAddChip function which is called every time a new chip is added. This function is currently sorting chips by name, but of course you can modify it to sort by any field you need.