Kendo DropdownList 和 ng-model 不起作用答案

【问题标题】：Kendo DropdownList and ng-model doesn't workKendo DropdownList 和 ng-model 不起作用
【发布时间】：2016-02-04 05:11:51
【问题描述】：

我有一个绑定到 ObservableArray/DataSource 的 Kendo Dropdownlist。它适当地填充数组中的值。但是当我将 ng-model 绑定到某个属性时，下拉列表无法选择该值。

HTML：

<select kendo-drop-down-list k-options="dropOptions" ng-model="user.id"></select>

JS：

var users = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B' },
  { id: 3, name: 'C' },
  { id: 4, name: 'D' },
  { id: 5, name: 'E' },
  { id: 6, name: 'F' }
];

var usersDataSource = new kendo.data.ObservableArray(users);

$scope.dropOptions = {
  dataSource: usersDataSource,
  dataTextField: 'name',
  dataValueField: 'id',
  optionLabel: "Select one..."
};

$scope.welcome = "World";
$scope.user = { id: 3 }

$scope.user = { id: 3 } 应该强制下拉列表选择 C。

这是 Plunkr 的链接： http://plnkr.co/edit/BxTqWet5sz725ZtKEKJr?p=preview

如何让下拉列表根据与 ng-model 绑定的属性中分配的值进行选择。我也使用过 k-ng-model，但它不起作用。请帮助我在这里做错了什么。谢谢。

编辑：下拉列表中的选择不是硬编码的。它将从数据库中获取。

【问题讨论】：

标签： angularjs kendo-ui kendo-dropdown angular-kendo

【解决方案1】：

我使用的是 Angular 1.4.9 和 Kendo v2015.3.1111。降级到 Angular 1.4.8 使其工作。

【讨论】：

在 AngularJs 更新部分 Angular 迁移期间我遇到了完全相同的问题。如果我升级剑道，那将解决问题。不幸的是，我目前无法降级 AngularJs 或更新 Kendo。您最终是否发现了问题所在或找到了解决方法？除了降级 AngularJs。

【解决方案2】：

我找到了一个可行的解决方案。

  <select kendo-drop-down-list
         k-options="odsSoluciones"
         k-data-text-field="'descripcion'"
         k-data-value-field="'solucionId'"
         k-value="prescDPIntercambio.solucionDPId"
         ng-model="prescDPIntercambio.solucionDPId">
 </select>


$scope.odsSoluciones = 
     dataSource: new kendo.data.DataSource({
         data: solucionesModel.data,
         }),
    };

在我的例子中，odsSoluciones 返回一个包含“solucionId”和“descripcion”字段的数组，prescDPIntercambio.solucionDPId 是我希望看到的值

【讨论】：

祝福您，先生！这太烦人了。

【解决方案3】：

Kendo 下拉值不反映基于 ng-model 的选择。相反，它提供了一个新属性：k-ng-model

对于一个基本的例子，看看这个：k-ng-model

【讨论】：

你检查了演示插件吗？
是的，我昨天确实检查过了。
尝试像演示一样在 html 中提供选项，而不是使用 k-options。
感谢 Ashfaq 的回复。不知何故，Angular 1.4.9 不适用于 Kendo UI。我什至尝试过 Kendo v2016，但没有成功。然后我尝试将 Angular 降级到旧版本，选择开始起作用。我要把这件事报告给剑道。
这很奇怪。

【解决方案4】：

只需将k-value = "user.id"添加到模板即可。

Working Plunker

【讨论】：

【解决方案5】：

<div ng-controller="AppCtrl">
  <h1>Hello {{ welcome }}!</h1>
  <div>Selected value is {{ user.id }}</div>
  <select kendo-drop-down-list 
          k-options="dropOptions"
          ng-model="user.id"
          value= 3
          class="glow"></select>
</div>

【讨论】：

值不固定。它将从数据库中检索。我只是将 3 用于示例目的。
您可以使用get 并将结果传递给值
我的问题不是如何设置值。可能是我不清楚。 Kendo 下拉列表不会根据属性中的值更新选择，user.id，使用 ng-model 绑定。

【解决方案6】：

有一种奇怪的情况，当我将 ng-model 声明为对象时，例如 $scope.abc.xyz = "test" ，绑定有效，而如果我这样做 $scope.abc = "test" ，则绑定不起作用。不知道是什么问题:)

【讨论】：