kendo ui listview с угловыми выбираемыми предметами

Question

У меня есть кендо ui ListView, и я хотел бы сделать элементы доступными (один выбор). Я не нашел ни одного образца в Интернете с угловым.

Что мне нужно сделать, это установить стиль для выбранного элемента, а также выполнить некоторые вызовы на основе выбранного элемента.

Это мой HTML:

  <div class="list-group no-radius no-border no-bg m-b-none" 
       kendo-list-view="publishPositionsListView" 
       k-options="ctrl.publishPositionsSourceOptions" 
       k-data-source="ctrl.publishPositionsSource"> 

       <a class="list-group-item p-l hover-anchor b-a no-select ng-scope" k-template> 
        <span>{{dataItem.Title}}</span> 
       </a> 
      </div> 

Это мой JavaScript:

vm.publishPositionsSource = new kendo.data.DataSource({ 
    dataType: "aspnetmvc-ajax", 
    transport: { 
     read: { 
      url: "publish/getall", 
      type: "GET" 
     } 
    }, 
    schema: { 
     type: "json", 
     data: "Data", 
     total: "Total", 
     model: { 
      id: "Id" 
     } 
    } 
}); 

vm.publishPositionsSourceOptions = { 
    dataBound: function (e) { 
     // Set selected style for the first item when loaded 
     e.sender.element.children().first().addClass("focus"); 
    } 
} 

Любая идея? Интересно, есть ли способ сделать это, вместо того, чтобы использовать ng-click

Answer 1

Чтобы включить единственный выбор в списке в kendoUI, добавьте selectable: "Single" в свой список-config. Вы также можете установить выбранный элемент программно, используя метод list.

Когда вы все это вместе, это может выглядеть следующим образом:

$scope.listViewOptions = { 
    dataSource: $scope.myDataSource, 
    selectable: "Single", 
    dataBound: function(event) { 
     /* Select the first item here */ 
    }, 
    change: function(event) { 
     /* Do something with the selected item */ 
    } 
} 

Я также создал рабочую dojo (это не с помощью углового, хотя).