CODEWITHSUNDEEP
javascriptangularjsx-editable
Sampath
Sampath

Reputation: 65988

Angular Xeditable Grid with Typeahead

I'm using Angular Xeditable Grid.Could you tell me how to use Typeahead with it ? I have tried as shown below.But it is not working :( Any help would be highly appreciated. Thanks.

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

Update : When user clicks the Edit button, it shows the id of the property.But it should be the text.How can I get rid of this ?

Here is the Updated fiddle with the latest version of the Xeditable Jsfiddle

Upvotes: 0

Views: 345

Answers (1)

Corey Kosloski
Corey Kosloski

Reputation: 96

I got your Fiddle working.

I added typeahead-input-formatter: e-typeahead-input-formatter="formatStatus($model)" and typeahead-on-select e-typeahead-on-select="onSelectedCallback($item, $model, $label)" to your typeahead.

I also updated the saveUser function.

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

Upvotes: 1

Related Questions