md-chips没有使用md-autocomplete

Question

我试着在这个代码片段上工作,其中自动完成功能嵌入芯片中.但是从自动完成中选择的项目不会转换为芯片.

自动完成的数据采用以下方式: {name:"John Doe", id:"1"}

请告诉我哪里错了.

问候

这是我的芯片代码:

<md-chips ng-model="student_ex" 
    md-autocomplete-snap
    md-transform-chip="transformChip($chip)"
    md-require-match flex>
       <md-autocomplete flex
            md-selected-item="student"
            md-search-text="searchText"
            md-items="item in searchStudent(searchText)"
            md-item-text="item.name"
            placeholder="Search for a Student to Exclude">
                <span md-highlight-text="searchText">ID: {{ item.id }} | Name: {{ item.name }}</span>
       </md-autocomplete>
       <md-chip-template>
                <span>
                    <strong>{{$chip}}</strong><em></em>
                </span>
       </md-chip-template>
</md-chips>

这是我的searchStudent和transformChip:

$scope.searchStudent = function (query) {
    if ((/^\d+$/.test(query))) {
        var results = query ? $scope.student_list.filter(
            function (name) {
                var regex = new RegExp(query,'gi');
                return name.id.match(regex);
            }
        ) : $scope.student_list;
    } else {
        var results = query ? $scope.student_list.filter(
            function (name) {
                var lowercaseQuery = angular.lowercase(query);
                var regex = new RegExp(lowercaseQuery,'gi');
                return name.name.match(regex);
            }
        ) : $scope.student_list;
    }
    return results;
};

$scope.transformChip = function (chip) {
    return {items:chip};
}

Answer 1

初始化模型,如下所示:

$scope.student_ex = [];

angular.module('MyApp', ['ngMaterial']).controller('AppCtrl', function($scope) {
    $scope.student_list = $scope.student_list = [{name:"John Doe", id:"1"}, {name:"Antipod", id:"2"}];
    $scope.student_ex = [];

    $scope.searchStudent = function (query) {
        if ((/^\d+$/.test(query))) {
            var results = query ? $scope.student_list.filter(
                function (name) {
                    var regex = new RegExp(query,'gi');
                    return name.id.match(regex);
                }
            ) : $scope.student_list;
        } else {
            var results = query ? $scope.student_list.filter(
                function (name) {
                    var lowercaseQuery = angular.lowercase(query);
                    var regex = new RegExp(lowercaseQuery,'gi');
                    return name.name.match(regex);
                }
            ) : $scope.student_list;
        }
        return results;
    };

    $scope.transformChip = function (chip) {
        return chip;
    }
});

<link rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

<script src="https://material.angularjs.org/latest/angular-material.min.js"></script>
  
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
    <md-chips ng-model="student_ex" 
        md-autocomplete-snap
        md-transform-chip="transformChip($chip)"
        md-require-match flex>
           <md-autocomplete flex
                md-selected-item="student"
                md-search-text="searchText"
                md-items="item in searchStudent(searchText)"
                md-item-text="item.name"
                placeholder="Search for a Student to Exclude">
                    <span md-highlight-text="searchText">ID: {{ item.id }} | Name: {{ item.name }}</span>
           </md-autocomplete>
           <md-chip-template>
                    <span>
                        <strong>{{$chip.name}}</strong><em></em>
                    </span>
           </md-chip-template>
    </md-chips>
</div>