Kendo DropdownList和ng-model不起作用

时间:2016-02-04 05:11:52

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

我有一个绑定到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://www.evopdf.com/demo/default.aspx

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

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

6 个答案:

答案 0 :(得分:3)

我正在使用Angular 1.4.9和Kendo v2015.3.1111。降级到Angular 1.4.8使它成功。

答案 1 :(得分:3)

我找到了一个有效的解决方案。

iPhone

在我的情况下,odsSoluciones返回一个带有“solucionId”和“descripcion”字段的数组,prescDPIntercambio.solucionDPId是我想要看到的值

答案 2 :(得分:1)

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

有关基本示例,请查看以下内容:k-ng-model

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

Working Plunker

答案 5 :(得分:0)

有一种更糟糕的情况,当我将ng-model声明为对象,例如$scope.abc.xyz = "test" 时,绑定有效,而如果我执行$scope.abc = "test" ,则绑定无效。 不确定是什么问题:)