带Typeahead的角度可编辑网格

Angular Xeditable Grid with Typeahead

本文关键字：编辑 网格 Typeahead      更新时间：2024-07-02

我正在使用Angular Xeditable Grid。你能告诉我如何将Typeahead与它一起使用吗？我已经试过了，如下所示。但它不起作用：（任何帮助都将不胜感激。谢谢。

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

更新：当用户单击"编辑"按钮时，将显示属性的id。但它应该是text。我该如何摆脱它？

这是最新版本Xeditable Jsfidle 的更新版本

我让你的Fiddle工作了。

我添加了typeahead输入格式化程序：e-typeahead-input-formatter="formatStatus($model)"，并在选择e-typeahead-on-select="onSelectedCallback($item, $model, $label)"时将typeahead添加到您的typeahead中。

我还更新了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;
    };
相关文章：