<md-autocomplete> with custom item formatting

by Dmitry

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<div ng-app="Bootstrap" ng-controller="AutocompleteController">
  <div layout-gt-sm="row">
    <md-autocomplete md-search-text="model.taxBox" md-selected-item="model.taxBoxItem" md-items="item in filterItemsByValue(model.taxBox)" md-item-text="item.value.toString()" md-floating-label="Tax in %" md-min-length="0" md-clear-button="true" required
    ng-pattern="/^[1-9]\d?$/">
      <md-item-template>
        <span md-highlight-text="ctrl.searchText">{{item.value}}% ({{item.label}})</span>
      </md-item-template>
    </md-autocomplete>
    <md-input-container>
      <label>Income</label>
      <input ng-model="model.income" integer ng-pattern="/^[1-9]\d+$/"/>
    </md-input-container>
  </div>
  <div>
    <hr>
    Current tax value is {{model.taxBox}} and item is: {{model.taxBoxItem}}.<br>
    Income type is: {{getIncomeType()}}.
  </div>
</div>

CSS

md-input-container {
  margin-top: 2em !important;
  margin-left: 1em;
}

JavaScript

var bootstrapModule = angular.module('Bootstrap', ['ngMaterial']);

function safeParseInt(value) {
  var result;
  if (!value || value === '' || isNaN(result = parseInt(value, 10)) || result != value) {
    return 0;
  }
  return result;
}

// Directive to solve the problem with numeric model item check:
// http://stackoverflow.com/questions/19404969/angular-data-binding-input-type-number
// http://stackoverflow.com/questions/15072152/input-model-changes-from-integer-to-string-when-changed
bootstrapModule.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, ele, attr, ctrl) {
      ctrl.$parsers.push(safeParseInt);
    }
  };
});

bootstrapModule.controller('AutocompleteController', ['$scope', function($scope) {
  $scope.config = {
    taxBoxes: [{
      value: 12,
      label: 'box 1'
    }, {
      value: 40,
      label: 'box 2 & 3'
    }, {
      value: 52,
      label: 'box 4'
    }, ],
  };

  $scope.model = {
    taxBox: '6',
    income: 1200
  };

  $scope.filterItemsByValue = function(value) {
    if (value == '') {
      return $scope.config.taxBoxes;
    }

    return $scope.config.taxBoxes.filter(function(item) {
      return item.value.toString().startsWith(value);
    });
  };
  
  $scope.getIncomeType = function() {
    return typeof($scope.model.income);
  };

}]);