Grille Xeditable angulaire avec Typeahead

Question

J'utilise Angular Xeditable Grille.Pouvez-vous me dire comment utiliser Typeahead avec elle? Je l'ai essayé, comme indiqué below.But il ne fonctionne pas :(Toute aide serait très appréciée Merci

<span editable-text="user.status" e-name="status" e-form="rowform" 
     e-typeahead="s as s.text for s in statuses | filter:$viewValue"> 
      {{ showStatus(user) }} 
</span> 

Mise à jour:.. Lorsque l'utilisateur clique sur le bouton Modifier, il montre la id du property.But il devrait être le text .Comment puis-je me débarrasser de cela?

Voici le violon à jour avec la dernière version du Xeditable Jsfiddle

Answer 1

Je suis votre travail Fiddle.

J'ai ajouté typeahead-input-formatter: e-typeahead-input-formatter="formatStatus($model)" et typeahead-on-select e-typeahead-on-select="onSelectedCallback($item, $model, $label)" à votre typeahead.

J'ai également mis à jour la fonction saveUser.

html

<span editable-text="user.status" e-name="status" e-form="rowform" 
     e-uib-typeahead="s as s.text for s in statuses | filter:$viewValue" 
     e-typeahead-input-formatter="formatStatus($model)" 
     e-typeahead-on-select="onSelectedCallback($item, $model, $label)" > 
      {{ showStatus(user) }} 
    </span> 

JS

$scope.showStatus = function(user) { 
     if (user.status && user.status.text) { 
      return user.status.text; 
     } 

     var selected = []; 
     if (user.status) { 
      selected = $filter('filter')($scope.statuses, {value: user.status}); 
     } 
     return selected.length ? selected[0].text : 'Not set'; 
     }; 

$scope.formatStatus = function(status) { 
    var displayText; 
    angular.forEach($scope.statuses, function(data) { 
     if (data.value === status || data.value === status.value) { 
     displayText = data.text; 
     return; 
     } 
    }); 

    return displayText ? displayText : status; 
    }; 

    $scope.onSelectedCallback = function ($item, $model, $label, $event) { 
      $model.status = $item.value; 
    };