Downloading choices from a remote site using angularjs

Question

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 get a bunch of json from my webapi server - this data is displayed in the response data section in order, but my drop-down list is always empty. The HTML page shows this:

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

What I take means that I do not receive the data correctly. I am obviously angular n00b :) what am I missing?

Answer 1

You must use the ng-options directive.

Example:

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

Here is more info. Using ng-options is slightly different for arrays and objects, and there are several ways to use it, but for each there is a little something: http://docs.angularjs.org/api/ng.directive:select

Answer 2

I know this is an old question, but someone might find this helpful when dealing with kendo and soothing services.

One way is to use k-rebind , it might look like this (I have not tested it):

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

You can experiment with k-rebind="Clients" even. It basically restores a kendo widget for you when a variable or object changes. Source: http://docs.telerik.com/kendo-ui/AngularJS/introduction

If you do not need to display a drop-down menu before downloading data. Try using ng-if , which in some cases delays kendo:

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