MD-Chips arbeiten nicht mit MD-Autocomplete

Question

Ich versuche, an diesem Schnipsel arbeiten, wo eine Autocomplete in Chips eingebettet ist. Aber das aus Autocomplete ausgewählte Element wird nicht in einen Chip umgewandelt.

Die Daten aus dem Auto abgeschlossen ist auf die folgende Weise: {name:"John Doe", id:"1"}

Bitte raten, wo ich bin falsch.

Grüße

Hier ist mein Code für Chips:

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

Und das ist mein searchStudent und 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

das Modell initialisieren, wie folgt aus:

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