Typeahead的角度可編輯網格

Question

我正在使用Angular Xeditable Grid.Could你告訴我如何使用Typeahead它嗎？我試圖如圖所示below.But它不工作:(任何幫助將不勝感激感謝

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

更新：。當用戶點擊編輯按鈕，它顯示了property.But的id它應該是text。怎樣才能擺脫這件事？

這裏是更新撥弄的Xeditable Jsfiddle

Answer 1

最新版本我收到了你Fiddle工作。

我在前面添加了typeheadhead-input-formatter：e-typeahead-input-formatter="formatStatus($model)"和typeheadhead-select-e-typeahead-on-select="onSelectedCallback($item, $model, $label)"。

我也更新了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; 
    };