Wie benutze ich kendo ui listview mit angularjs

Question

Weiß jemand wo finde ich ein Beispiel für kendo ui listview mit angularjs? Ich konnte Beispiele für Raster und Dropdown-Liste finden. Aber was ist mit allen anderen Kontrollen? kein Beispiel ...

Answer 1

Folgendes sollte funktionieren:

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

Hier ist eine Live-Demo: http://jsbin.com/ODElUfO/69/edit

Answer 2

Eine wichtige Sache zu erinnern, wenn Sie die Kendo-Vorlage zu verwenden, wenn mit kantigem Bindung, Sie müssen an dataItem binden. Es wäre also {{dataItem.name}} nicht {{name}}. Wenn Sie ein Kendo-Template verwenden, wird es nur # = name # sein. Kleiner aber kniffliger Unterschied. Vergessen Sie auch nicht die One-Way-Bindung, da Sie normalerweise keine 2-Wege-Vorlagen für Vorlagen verwenden möchten, also {{:: dataItem.name}}.

Answer 3

Sie können das offizielle Telerik Listenansicht Winkel Beispiel finden Sie hier: http://demos.telerik.com/kendo-ui/listview/angular

Wie zum Beispiel Atanas Korchev, würde ich es eher wie dies tut. Hier können Sie die Einstellungen Ihrer Listview in den listOptions ändern und Ihre Vorlage mit eckigen Anweisungen bearbeiten, ohne jQuery zu verwenden.

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