我如何使用kendo ui listview和angularjs

Question

有誰知道我在哪裏可以找到kendo ui listview和angularjs的例子？ 我能找到網格和下拉列表的例子。 但是所有其他控件呢？沒有例子...

Answer 1

下面應該工作：

<div ng-controller="MyController">  
    <div>Products: {{products.total()}}</div> 
    <div kendo-list-view k-data-source="products" k-template="template"> 
    </div> 
    <script id="template" type="text/x-kendo-template"> 
     <div> 
     #= name # 
     </div> 
    </script> 
    </div> 

<script> 
function MyController($scope) { 
    $scope.products = new kendo.data.DataSource({ 
    data: [ 
     { id:1, name:'Tennis Balls', department:'Sports'}, 
     { id:2, name:'Basket Balls', department:'Sports'}, 
     { id:3, name:'Oil', department:'Auto'}, 
     { id:4, name:'Filters', department:'Auto'}, 
     { id:5, name:'Dresser', department:'Home Furnishings' } 
    ] 
    }); 
    $scope.template = $("#template").html(); 
} 
</script> 

這裏有一個現場演示：http://jsbin.com/ODElUfO/69/edit

Answer 2

一個關鍵的一點要記住，如果你使用的劍道模板，與角的結合，你必須綁定到dataItem。所以它會是{{dataItem.name}}而不是{{name}}。如果你使用劍道模板，它將只是＃=名稱＃。小但棘手的區別。另外，不要忘記單向綁定，因爲通常您不需要雙向模板，所以{{:: dataItem.name}}。

Answer 3

你可以找到的官方Telerik的列表視圖角度位置例如：http://demos.telerik.com/kendo-ui/listview/angular

至於Atanas Korchev的例子，我寧願做這樣。 在這裏，您可以在listOptions中更改您的列表視圖的設置，並且您可以使用角度指令編輯您的模板而無需使用jQuery。

<div ng-controller="MyController">  
    <div>Products: {{products.total()}}</div> 
    <div kendo-list-view 
     k-options="listOptions" 
     k-on-change="onListChange()" 
     ng-show="listVisible"> 

     <div k-template> 
      {{ dataItem.name }} 
     </div> 
    </div> 
</div> 
<script> 
    function MyController($scope) { 
     $scope.listOptions = { 
      dataSource: new kendo.data.DataSource({ 
       data: [ 
        { id:1, name:'Tennis Balls', department:'Sports'}, 
        { id:2, name:'Basket Balls', department:'Sports'}, 
        { id:3, name:'Oil', department:'Auto'}, 
        { id:4, name:'Filters', department:'Auto'}, 
        { id:5, name:'Dresser', department:'Home Furnishings' } 
       ] 
      }), 
      selectable: true 
     }; 

     $scope.onListChange = function() { 
      // do something 
     } 

     $scope.listVisible = true; 
    } 
</script>