如何根据选择自动完成输入？

Question

我想根据选择自动完成输入。例如，如果我选择laptop，则要在输入中填充“ 5677”。另外，如果我按Submit，我想查看所选内容的原始数据：

{
    "Type": "laptop",
    "value": "5677"
}

但是，我得到了这样的嵌套对象：

{
  "Type": {
    "Type": "laptop",
    "value": "5677"
  }
}

这里是fiddle。这就是我所拥有的：

angular
  .module('MdAutocompleteBugApp', ['ngMaterial'])
  .controller('MdAutocompleteBugController', function ($scope, $q, $timeout) {

    $scope.data = {};
    $scope.save = function () {
      console.log($scope.data);
      console.log("dd");
    }

    $scope.datas = [
      {"Type": "Mobile","value": "2400"}, 
      {"Type": "laptop","value": "5677"}, 
      {"Type": "Mobile","value": ""},
      {"Type": "tv",}
    ];

    var elementId = [];

    $scope.newArr = $scope.datas.filter(el => {
      if (elementId.indexOf(el.Type) === -1) {
        elementId.push(el.Type);
        return true;
      }
    });
    $scope.getMatches = function (searchText) {
      var configs = $scope.newArr.filter(function (config) {
        return (config.Type.toUpperCase().indexOf(searchText.toUpperCase()) !== -1);
      });
      return configs;
    }
  });

<div ng-app="MdAutocompleteBugApp">
  <div ng-controller="MdAutocompleteBugController as vm">
    <form name = "test" ng-submit="save()">
      <md-toolbar class="md-padding">

        <md-autocomplete 
          md-selected-item="data.Type" 
          md-search-text="searchText" 
          md-items="item in getMatches(searchText)" 
          md-item-text="item.Type" 
          placeholder="Search states" 
          md-no-cache="true">
          <md-item-template>
            <span>{{item.Type}} </span>
          </md-item-template> 
        </md-autocomplete>

      </md-toolbar><br>

      Value <input type="text" ng-model="data.value"><br><br><br>
      <button type="submit">submit</button>

    </form>
  </div>
</div>

Answer 1

我们需要添加“ md-selected-item-change =“ selectedItemChange（item）”“，然后我们就可以将数据传递到输入字段，并且可以得到想要的输出

$scope.selectedItemChange = function(item)
{
if(item){
$scope.data.Type = item.Type;
$scope.data.Value = item.Value;
}

}