Kendo UI ListView 数据源不工作答案

【问题标题】：Kendo UI ListView DataSource is not workingKendo UI ListView 数据源不工作
【发布时间】：2015-03-12 14:43:01
【问题描述】：

<div ng-controller="patientSearchCtrl">
    <div kendo-list-view id="listView" k-data-source="source">
        <div class="product" k-template>
            <h3>{{ dataItem.First_Name }}</h3>
            <p>{{ dataItem.Last_Name }}</p> 
        </div>
    </div>
    <div kendo-pager k-data-source="source"></div>
</div>

<script src="../../Scripts/vendor/jquery-2.0.3.min.js"></script>
<script src="../../Scripts/vendor/angular.js"></script>
<script src="../../Scripts/vendor/kendo.core.min.js"></script>
<script src="../../Scripts/vendor/kendo.angular.min.js"></script>
<script src="../../Scripts/vendor/kendo.all.min.js"></script>
<script src="alertApp.js"></script>

<script>
    angular.module("alertApp", ["kendo.directives"])
        .controller("patientSearchCtrl", function ($scope, $http) {
            var product= null;//= [{ RowIndex: 1, PatientKey: 3, First_Name: "Barbara", Last_Name: "Wells", DOB: "07-29-1969" }];

            $http.get('http://localhost:1242/Api/PatientSearch?firstName=Bar&lastName=wells&pageIndex=0&pageSize=10&sortingOrder=FIRST_NAME').
              success(function (info, status, headers, config) {                     
                  product = info[0]["Table"];
                  console.log(product);
                  $scope.source = new kendo.data.DataSource({
                      data: info[0]["Table"],
                      pageSize: 21
                  });
              }).
              error(function (data, status, headers, config) {
                  console.log('Error: ' + data);
              });                
        });
</script>

在上面的代码中console.log(product) 给出了输出：

[Object]
    0: Object
    First_Name: "Barbara"
    Last_name: "Wells"
    DOB: '07-29-1969'

但 ListView 不显示任何数据。我在这里缺少什么？如果我像下面这样对数据进行硬编码，那就可以了。

$scope.source = new kendo.data.DataSource({
   data: [{ RowIndex: 1, PatientKey: 3, First_Name: "Barbara", Last_Name: "Wells", DOB: "07-29-1969" }],
   pageSize: 21
 });

【问题讨论】：

如果你的data: info[0]["Table"] 是一个对象，并且当你硬编码数据时你在数组中设置了一个对象，试试这个：data: [info[0]["Table"]]。
没有info[0]["Table"] 是一个数组

标签： angularjs asp.net-web-api kendo-ui

【解决方案1】：

尝试改变

$scope.source = new kendo.data.DataSource({
                data: product,
                pageSize: 1
            });

到

$scope.source = {
                data: product,
                pageSize: 1
            };

或

$scope.source = product;

提供完整的选项。使用下面的代码

  <div kendo-list-view k-options="source "></div>

            $scope.source = {
                      dataSource: products,
                      template: "<div>#:First_Name#</div>"
                  };

【讨论】：