我正在使用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
。但它应该是文本
。如何我摆脱这个?
这是使用最新版本的 Xeditable Jsfiddle 更新的 fiddle
最佳答案
我收到了你的Fiddle工作。
我添加了 typeahead-input-formatter: e-typeahead-input-formatter="formatStatus($model)"
和 typeahead-on-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;
};
关于javascript - 带预先输入功能的 Angular 可编辑网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36623922/