4

My html:

<div id="body" ng-controller="ClientController">    
    <select kendo-drop-down-list>
        <option data-ng-repeat="client in Clients">{{ client.Name }}</option>
    </select>
    <button data-ng-click="loadClients()">Load Clients</button>
    <pre>http response data: {{ data }}</pre>
</div>

@Scripts.Render("~/bundles/index")

And my javascript:

function ClientController($scope, $http) {
    $scope.url = "/tracker/api/client";
    $scope.selectedClient = null;
    $scope.Clients = null;
    $scope.loadClients = function () {
        $http.get($scope.url).then(function (response) {
            $scope.data = response.data;
            $scope.Clients = response.data;
        });
    };
 }

When I click the button, I retrieve a bunch of json from my webapi server- this data displays okay in the response data section- but my dropdown is always empty. The HTML page shows this:

<option value="? object:null ?"></option>

Which I take means I am not getting data set properly. I'm obviously an angular n00b :) what am I missing?

4

2 回答 2

8

您应该使用 ng-options 指令。

例子：

<select ng-model="selectedClient" ng-options="client.name for client in Clients">

这里有更多信息。ng-options 的用法对于数组和对象有点不同，并且有几种不同的使用方式，但每个人都有一些东西：http://docs.angularjs.org/api/ng.directive：选择

于 2013-07-08T19:11:41.160 回答
0

我知道这是一个老问题，但在使用剑道和宁静的服务时，有人可能会发现这很有帮助。

一种方法是使用k-rebind，它可能看起来像这样（我还没有测试过）：

    <select kendo-drop-down-list k-rebind="Clients.length">
      <option data-ng-repeat="client in Clients">{{ client.Name }}</option>
    </select>

你甚至可以尝试k-rebind="Clients"。当变量或对象发生变化时，它基本上会为您重新初始化 kendo 小部件。资料来源：http ://docs.telerik.com/kendo-ui/AngularJS/introduction

如果您不需要在加载数据之前显示下拉列表。尝试使用ng-if，在某些情况下会延迟剑道：

    <select kendo-drop-down-list ng-if="Clients.length > 0">
      <option data-ng-repeat="client in Clients">{{ client.Name }}</option>
    </select>
于 2015-04-15T10:52:03.240 回答