剑道角's自动完成在结果中显示对象

Kendo Angular's Auto complete showing object in results

本文关键字：结果 对象 显示      更新时间：2024-05-26

我正在尝试使用kendo angular的使用服务器过滤的自动完成小部件。服务调用后，弹出窗口显示[对象对象]，其数量等于服务器返回的结果。所以，你能看看我的代码，并指出我正在做的错误吗。

这是我的代码：

var oThis = this;
var uiQueryConfig = this.seUIConfigsCacheService.GetItem('OpportunityDashboard');
var dataSource = new kendo.data.DataSource({
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
   read: function (options) {
           oThis.getDataFromServer(options, uiQueryConfig, false, options.data.filter.filters[0].value);
         }
   }
});
$scope.dataSource = dataSource;

以下是getDataFromServer:的定义

getDataFromServer(options: any, uiConfig: Model.UIConfig, recordsCountNeeded: boolean, searchText?: string): void {
var searchParam = new Model.SearchParamsCM();
searchParam.PageIndex = options.data.page;
searchParam.PageSize = options.data.pageSize;
searchParam.SearchText = searchText;
var oThis = this;
this._seHttpService.GetWithParms('/spa/api/genericrequest', searchParam)
    .then(function (result) {
        var datum = oThis.createJSONFromResults(result.data, uiConfig);
        if (recordsCountNeeded) //grid
            options.success(datum);
        else //auto complete
            options.success(datum.data);
        },
        function (result) {
            options.error(result);
    });
 }

代码是打字的。

这是在模板中：

<input id="name" kendo-auto-complete k-min-length="3" k-data-text-field="name" k-ignore-case="true" k-data-source="dataSource" ng-model="searchText" />

我试着调试options.success函数，发现那里的参数值有很多其他信息，包括从服务器返回的整个对象，而不是我传递给它的对象，即datum.data.

期待中的感谢！

编辑：好的，我已经解决了。实际上有两个问题，第一个问题是k-data-text-field中的变量名应该用单引号，即k-data-ttext-field="'name'"。其次，变量名区分大小写，因此它应该是k-data-text-field="'name'"

好的，我已经整理好了。实际上有两个问题，第一个问题是k-data-text-field中的变量名应该用单引号，即k-data-text-field="'name'"。其次，变量名区分大小写，因此它应该是k-data-text-field="'Name'"

如果你想从太多的属性中解脱HTML，你可以把k-options属性传递给你的剑道元素，如下所示：

<input id="name" kendo-auto-complete k-options="acOptions" k-data-source="dataSource" ng-model="searchText" />

然后定义你的范围上的选项，如下所示：

$scope.acOptions = {
   minLength: 3,
   dataTextField: 'name'
   ignoreCase: true
}
相关文章：