Reputation: 65988
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
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